我正在使用Mika Tuupola的Lazy Load jQuery Plugin。
它需要以下标记才能工作。
<img class="lazy" data-original="img/example.jpg">
我搜索了很多地方,但没有一个描述属性的工作方式:
要创建除默认灰色背景之外的加载背景,我该怎么办?输入&#34; src&#34; 1 x 1白色gif?这里的最佳做法是什么?
答案 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。