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

Question

所以这个科技博客网站名为＆＃34; verge＆＃34; ：http://www.theverge.com/

当您第一次去那里时，图片会在页面完成后加载。

（在加载页面之前只有背景颜色，然后加载图像）

如何在wordpress中实现同样的目标？

感谢

Answer 1

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

{'pigeon': '1', 'hate': '10', 'hello': '10', 'would': '5', 'adore': '10'}

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

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

另请注意，省略影响页面流量的图像（其容器的大小）将导致加载过程看起来抽搐，因此如果图像的大小由css设置会更好。

您也可以使用this wordpress plugin来完成（对于内容和精选图片中的图片）。它还会在折叠下方的图像之前加载可见图像（并且可选地延迟加载那些图像）。