javascript - jquery 在加载之前从页面中删除图像

Question

我的问题类似于this但我不能在服务器端执行此操作，因为我只想删除图像如果浏览器宽度小于 850 像素。
我目前正在使用这个:

$(function () {
    if($(document).width() < 850) {
        $('.thumb').remove();
    }
});

图像被删除了，但如您所见here ，浏览器无论如何都会加载它们。
有人对此有解决方案吗？

谢谢

解决方案(现在有效!

不要一直加载图片，永远不要加载，除非浏览器大于850 HTML:

<?php 
if(file_exists($sites[$i].'/thumb.png')) { ?>
    <img class="thumb" data="/experiments/<?=$sites[$i]?>/thumb.png" />
<?php 
} 
?>

JS:

$('.thumb').each(function(index, element) {

        $(this).attr('src', $(this).attr('data'));
});

Answer 1

我认为你必须反过来:这意味着你只会加载图像，如果文档。 width 比 850 宽。据我所知，如果图像在 HTML 文档中“硬编码”，它们将在脚本运行之前被请求/加载。