javascript - 如何防止图片在特定宽度的设备上加载？

Question

我不想使用媒体查询将它们设置为 display:none; 因为它们仍然会加载。有没有办法仅在设备宽度超过 500px 时加载它们？

Answer 1

您可以在页面本身使用 JavaScript 加载后加载它们，并在 window.innerWidth 小于 500 时忽略某些图像。

实现的细节将由您自己的应用程序决定，但我建议如下:

用占位符替换所有图像，并为您可能希望隐藏的图像指定某个类别:

<img src="placeholder.png" class="gt500" data-source="realimage.png">

然后你可以做类似的事情(假设 jQuery):

$(document).ready(function(){
    if(window.innerWidth > 500) { return; }
    $('img.gt500').each(function() {
        $(this).attr('src', $(this).data('source'));
    });
});

这会将所有占位符替换为真实图像，但前提是窗口足够宽。