javascript - 避免在手机上下载图片

Question

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

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

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

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

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

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

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

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

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

Answer 1

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

希望对您有所帮助!