照片动态性载入技术性运用及jquery.lazyload软件应

2021-01-20 21:21 jianzhan
运用案例小站 http://www.uhuigou.net
照片动态性载入不算甚么新物品了,许多大站都在用,优点很显著,关键是节约总流量(包含服务器和顾客端),给客户的体验也好些些,能够提升网页页面的开启速率.
基本原理也不繁杂,照片還是用原先的img标识,src指向1个默认设置的小图,例如loading之类,随后自定1个img的特性储存真实的照片详细地址,当客户浏览到这个照片部位的情况下,根据js操纵把src的值改为自定特性的值.

这个作用如今被做变成许多软件.我用的叫 jquery.lazyload ,必须的到我的站上立即免费下载吧,只必须这1个文档就够了,自然你还得有jqeruy
应用方式也很简易,原先的img标识加1个 data-original 特性储存真正的照片详细地址,事例以下

拷贝编码
编码以下:

<img class="lazy" src="http://bcs.duapp.com/uhuigou/loading.gif" data-original="http://bcs.duapp.com/uhuigou/2026313.jpg" style="width: 100%; display: inline-block;">

必须动态性载入的img都这么写便可以了, jquery.lazyload 只认data-original,style或别的特性依据必须随意写
最终还要在网页页面的jquery.ready恶性事件中原始化1下

拷贝编码
编码以下:

$(function() {$("img.lazy").lazyload();});

好了大获全胜!