Question

我正在创建一个包含大量大图像的页面，所以我当然希望确保页面加载没有太多麻烦。我在这里阅读了这篇文章http://24ways.org/2010/speed-up-your-site-with-delayed-content

推迟的方法如下（从页面拉出，不介意URL）

<div>
    <h4>
        <a href="http://allinthehead.com/" data-gravatar-hash="13734b0cb20708f79e730809c29c3c48">
            Drew McLellan
        </a>
    </h4>
</div>

然后一段js处理图像加载

$(window).load(function() {
    $('a[data-gravatar-hash]').prepend(function(index){
        var hash = $(this).attr('data-gravatar-hash')
        return '<img width="100" height="100" alt="" src="http://www.gravatar.com/avatar.php?size=100&amp;gravatar_id=' + hash + '">'
    });
});

我不打算为每张图片执行此操作，但对于某些我不需要在页面加载时显示的图像。

这是最好的方法吗？还是有更好的方法通过延迟图像来实现更快的页面加载？

由于

Answer 1

有点晚了，但如果它对其他人有利，那么Patrick Sexton就这个主题发表了一篇很棒的文章 https://varvy.com/pagespeed/defer-images.html

他基本上建议同样的事情，只有使用微小的基础64编码图像，他可以将他的图像标签直接放在HTML中，这样可以单独控制高度，宽度，alt等属性。与在脚本中创建整个图像标记相比，以这种方式维护HTML要容易得多。

mThread.join();

然后，您的脚本对于所有图像都是简单且通用的

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image1.jpg" alt="image 1">
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="image2.jpg" alt="image 2">

Answer 2

这似乎是推迟图像的相当干净的方式。唯一可能的问题是图像是否包含重要信息，因为“数据属性是HTML5中的新功能”。

另一种选择可能是将图像放到身体的末端并使用CSS来定位它们。我个人会坚持使用javascript。

Answer 3

这是展示.querySelectorAll：

的版本

function swapSrcAttributes(source) {
  return function(element) {
    element.setAttribute('src', element.getAttribute(source));
  }
}

function forEach(collection, partial) {
  for (var i = 0; i < collection.length; i++) {
     partial(collection[i]);
  }
}

function initDeferImages() {
  // for images
  var deferImages = document.querySelectorAll('img[data-src]');

  // or you could be less specific and remove the `img`
  deferImages = document.querySelectorAll('[data-src]');

  forEach(deferImages, swapSrcAttributes('data-src'));
}

window.onload = function() {
  initDeferImages();
}

以下是.querySelector和.querySelectorAll通过https://caniuse.com/#feat=queryselector的兼容性表格

Answer 4

自2019年4月起，有native support for lazy image loading in Chrome。

希望它会在更多浏览器中受支持：）

Answer 5

HTML

<img
    width="1024"
    src="https://placehold.it/64x48.jpg"
    data-src-defer="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80"
    alt="image 1"
/>
            
<img
    width="1024"
    src="https://placehold.it/64x48.jpg"
    data-src-defer="https://images.unsplash.com/photo-1557053964-d42e8e29cb27?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
    alt="image 2"
/>

JS

function deferImgs() {
    Array
    .from(document.querySelectorAll("img[data-src-defer]"))
    .forEach((element) => {
        element.setAttribute("src", element.dataset.srcDefer);
        });
}
    
window.addEventListener("load", deferImgs());

================================================ ==================

我试图通过这次编辑来满足 Farrukh 的要求。

我尽力而为，但不幸的是，英语只是我说的第三种语言。而且我不是语言天才。 :D

这个js代码片段说明了一些大图的延迟加载。这不是一个实际的实现。图像之间的大小差异故意很大。这是因为测试必须是说明性的。您可以通过浏览器开发工具页面监控其运行情况。 F12 > 网络选项卡 > 速度设置下拉菜单测试的理想网速在 1 - 3MB/s 之间（网速有些慢）。您可能希望多次运行测试，因此您可以看到，在这种情况下，加载图像的顺序不受控制，而是取决于传输。因为没有规定，所以无法预测，哪个图像会先到达。

我们首先将一个小图像加载到一个大占位符中。（图片：64x48.jpg > 占位符宽度="1024"）。

querySelectorAll() 方法返回一个静态节点列表。乍一看，这个节点列表看起来像一个数组，但实际上不是。

这是一个类似数组的对象：

document.querySelectorAll("img[data-src-defer]")

Array.from() 方法可以从这个对象创建一个新的数组实例。现在可以在这个数组上执行 forEach 方法。 forEach() 方法为数组的每个元素执行一次提供的函数。

在这种情况下，数组的每个元素都被传递给这个函数一次：

(element) => {
        element.setAttribute("src", element.dataset.srcDefer);
        }

并且这个函数将图像标签的 src="" 属性的值设置为相同图像标签的数据集的值。

src="https://placehold.it/64x48.jpg";

data-src-defer="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80";

src = data-src-defer;

So finally:

src="https://images.unsplash.com/photo-1570280406792-bf58b7c59247?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1486&q=80";

Answer 6

你可以像下面的例子一样简单：

所有图像都有 data-src 属性，您可以在其中放置文件路径。和 src 属性与一个假的透明 1x1px png 图像。您还可以添加设置为 loading 的 lazy 属性，它告诉现代浏览器avoid to load immediately the images that are out of viewport（可见站点区域）

<img data-src="path/to/image.jpg" loading="lazy"
     src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />

添加此脚本以在您的网站加载后使所有图像获得 src 属性（您需要 jQuery 才能使其工作）

$(function(){
    $("img[data-src]").attr("src", function(){ return $(this).data("src"); });
});

通过延迟图像加速页面加载

6 个答案: