避免在手机上下载图片

Question

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

尽管如此，浏览器还是会下载这些图像，因为 HTML 会在 CSS 布局发生之前被解析。但我只想下载移动版本所需的图像，这样我就可以减少 HTTP 请求和整体下载大小。

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

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

当浏览器窗口宽度 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()。

例如，如果浏览器宽度 data-device 属性的元素。它将检查data-device 值，如果是mobile，它将从data-src 属性中获取值，并将其作为实际图像src 属性的值。

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

但是，我不喜欢这样。看起来像是为了以某种方式解决这个问题而拼凑起来的。我的意思是必须有另一种解决方案，因为我确信每个使用响应式网站的人迟早都会遇到同样的问题。我已经用谷歌搜索了很多这个问题，但我还没有找到令人满意的解决方案。每个人都在说不同的东西。

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

Answer 1

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

希望对您有所帮助！