使用" src"更改延迟加载灰色背景图像属性

时间:2016-10-05 06:58:54

标签: jquery html image lazy-loading

我正在使用Mika Tuupola的Lazy Load jQuery Plugin

它需要以下标记才能工作。

<img class="lazy" data-original="img/example.jpg">

我搜索了很多地方,但没有一个描述属性的工作方式:

要创建除默认灰色背景之外的加载背景,我该怎么办?输入&#34; src&#34; 1 x 1白色gif?这里的最佳做法是什么?

2 个答案:

答案 0 :(得分:2)

Three approaches you can follow

 1. Lazy load with grey background
 2. Add low resolution image (blurry) to the 'src'
 3. Add loader gif to the 'src'`



Examples

 1. https://jsfiddle.net/Guffa/u7bcms27/
 2. http://dinbror.dk/blazy/?ref=blog
 3. http://afarkas.github.io/lazysizes/#examples
 4. http://codepen.io/afasterweb/pen/dpbdyN

答案 1 :(得分:0)

我认为最好的方法是通过以下标记:

<img class="lazy" src="img/pixel.png" data-original="img/example.jpg">

pixel.png是一个像往常一样加载的超小尺寸图像,而当图片进入视口时会加载example.jpg。

为正常加载设置像素大小的图像符合延迟加载的概念,即减少初始页面加载时间并减少带宽消耗。

可以在不使用Photoshop的情况下轻松生成像素online