页面完成后加载图像（不是延迟加载）

Question

所以有一个名为“verge”的科技博客网站：http://www.theverge.com/

当你第一次去那里时，页面完成后加载图像。

（只有背景色，直到页面加载完毕，再加载图片）

如何在 wordpress 中实现同样的功能？

谢谢

Answer 1

唯一的方法是在加载之前省略源代码，然后使用 Javascript 插入它们。浏览器非常积极地尽可能早地加载内容。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="actualImage.png"/>

请注意，generates an additional request on the document 是一个空源。有几种方法可以解决这个问题，一种是将透明像素作为 base64 字符串。

document.addEventListener("DOMContentLoaded", function (e) {
    var delayedImages = document.querySelectorAll("img[data-src]");
    for (var i = 0; i < delayedImages.length; i++) {
        delayedImages[i].src = delayedImages[i].getAttribute("data-src");
    }
});

另外请注意，忽略影响页面流程（其容器大小）的图像会导致加载过程看起来很紧张，因此如果图像具有由 css 设置的大小会更好。

您也可以只使用this wordpress plugin，它正是这样做的（对于内容中的图像和特色图像）。它还会在首屏下方的图像之前加载可见图像（并且可以选择延迟加载这些图像）。