Question

我正在一个响应式网站上工作，其中所有视口版本共享相同的HTML / CSS。问题是我不需要移动版本上显示的桌面版本的所有图像。我在CSS中隐藏了display: none这些元素。

然而，浏览器会下载这些图像，因为在CSS布局发生之前会解析HTML。但我只想下载移动版所需的图像，以便减少HTTP请求和整体下载大小。

我的解决方案是使用<picture>这样的元素：

<picture>
    <source srcset="image.jpg" media="(min-width: 992px)">
    <img src="" alt="an image">
</picture>

当浏览器窗口宽度<1时，不会下载图像。 992px，因为我让后备源属性为空src=""。不幸的是Safari还没有支持它。因此，我不想使用它。

现在我想出了自己的JavaScript / JQuery，但我不确定这是不是一个好主意。

HTML：

<img src="" alt="img" data-device="mobile" data-src="img-mobile.jpg">
<img src="" alt="img" data-device="tablet" data-src="img-tablet.jpg">
<img src="" alt="img" data-device="desktop" data-src="img-dektop.jpg">

JavaScript的：

function loadImages() {
    var mobile = window.innerWidth < 768;
    var tablet = window.innerWidth >= 768 && window.innerWidth < 992;
    var desktop = window.innerWidth >= 992;

    if(mobile) {
        $('[data-device]').each(function() {
            if($(this).attr('data-device') === 'mobile') {
                $(this).attr('src', $(this).attr('data-src'));
            }
        }); // end each
    } else if(tablet) {
        $('[data-device]').each(function() {
            if($(this).attr('data-device') === 'tablet') {
                $(this).attr('src', $(this).attr('data-src'));
            }
        }); // end each
    } else if(desktop) {
        $('[data-device]').each(function() {
            if($(this).attr('data-device') === 'desktop') {
                $(this).attr('src', $(this).attr('data-src'));
            }
        }); // end each
    }
}

$(document).ready(function() {
    loadImages();
});

$(window).resize(function() {
    loadImages();
});

浏览器使用空src属性解析HTML。页面加载完毕后，将调用loadImages()。

例如，如果浏览器宽度是＆lt; 768px。该函数遍历具有data-device属性的所有元素。它会检查data-device值，如果它mobile它将从data-src属性获取值并将其作为值添加到实际图像src属性。

这意味着浏览器只会下载并显示我网站移动版的图片。

但是，我不喜欢这样。它似乎被黑客攻击以某种方式解决这个问题。我的意思是必须有另一个解决方案，因为我确信每个使用响应式网站的人都会很快或稍后遇到同样的问题。我已经搜索了很多这个问题，但我还没有找到令人满意的解决方案。每个人都在说些不同的东西。

你们是如何解决这个问题的？什么是最佳做法？

Answer 1

我必须说你解决这个问题的想法看起来不错。另一个想法是，如何替换img元素的div元素，并使用css中的background-image样式为每个设备加载@media？这将根据使用的设备加载一个或另一个图像，我相信这是很多开发人员现在使用的东西。

希望有所帮助！

避免在手机上下载图像

1 个答案: