My problem is simmilar to this but I can't do it server side, since I only want to remove the images if the browser width is less than 850px.
I am currently using this:\[code\]$(function () { if($(document).width() < 850) { $('.thumb').remove(); }});\[/code\]The images get removed, but as you can see here, the browser loads them anyway.
Do anyone have a solution for this?ThanksSolution (it works now!:Instead of always loading the images, never load them, unless the browser is greater than 850HTML:\[code\]<?php if(file_exists($sites[$i].'/thumb.png')) { ?> <img class="thumb" data="http://stackoverflow.com/experiments/<?=$sites[$i]?>/thumb.png" /><?php } ?>\[/code\]JS:\[code\]$('.thumb').each(function(index, element) { $(this).attr('src', $(this).attr('data'));});\[/code\]
I am currently using this:\[code\]$(function () { if($(document).width() < 850) { $('.thumb').remove(); }});\[/code\]The images get removed, but as you can see here, the browser loads them anyway.
Do anyone have a solution for this?ThanksSolution (it works now!:Instead of always loading the images, never load them, unless the browser is greater than 850HTML:\[code\]<?php if(file_exists($sites[$i].'/thumb.png')) { ?> <img class="thumb" data="http://stackoverflow.com/experiments/<?=$sites[$i]?>/thumb.png" /><?php } ?>\[/code\]JS:\[code\]$('.thumb').each(function(index, element) { $(this).attr('src', $(this).attr('data'));});\[/code\]