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'));
    });
});

将交换所有占位符以获取真实图像，但前提是窗口足够宽。

Answer 2

我会尝试这样的事情：

<img src="" data="actualimagesource" />

检查服务器端或客户端的每个图像：如果网站的宽度允许显示图像，请从“数据”中提取字符串并将其放在“src”属性中。

非常类似于：http://www.appelsiini.net/projects/lazyload

Answer 3

除了从DOM中删除图像或更改它的src之外，您无法阻止加载图像。即便如此，它已经开始加载，所以它是否完全加载将取决于浏览器如何实现它，我不知道答案。

我所能建议的是你在所有图像srcs前加上＃，然后做这样的事情：

var imgs = document.querySelectorAll('img[src^="#"]');
for (var i = 0; i < imgs.length; i++) {
   imgs[i].setAttribute('src', imgs[i].getAttribute('src').substr(0));
}

如果屏幕宽度大于某个数字。这可以防止禁用JavaScript的用户查看您的图像，因此请仔细考虑优缺点。

Answer 4

我可能会做这个服务器端。 WURFL是一个经常用于移动设备嗅探的数据库，PHP示例是here。在桌面Web开发浏览器和设备嗅探被认为是超级糟糕的做法。对于移动设备，由于设备数量众多且功能不同，因此通常是必需的。我相信WURFL测试用户代理字符串服务器端（以及其他东西）来检测设备，然后返回一堆关于它的信息（包括屏幕分辨率），然后你可以根据这些信息提供不同大小的图像。

我认为没有办法干净地防止前端的图像负载。您可以在文档加载时使用javascript遍历所有图像，如果宽度大于500px，则将src属性设置为空字符串。这样做的问题是你必须确保所有图像在标记中都有特定的尺寸，甚至在图像加载完成之前，某些浏览器也不会报告宽度。您也无法保证在javascript启动之前图像不会开始下载（而且并非所有移动设备都支持js或打开它）但这对我来说感觉非常糟糕。

如何防止图像加载到一定宽度的设备上？

4 个答案: