jquery实现异步加载图片(懒加载图片一种方式) - 行业资讯

首先将插件在金桥后面引入
　　

　　　　　　(函数(美元){//警报($ .fn.scrollLoading); 　　.fn美元。scrollLoading=function(选项){ 　　var={违约　　attr:“data-url” 　　}；　　var params=$。扩展({},违约,选项| | {}); 　　参数个数。缓存=[]; 　　(美元),每人(函数(){ 　　var=this.nodeName.toLowerCase节点(), 　　url=$ () .attr (params [“attr ")); 　　如果url (!) { 　　返回; 　　} 　　var=https://www.yisu.com/zixun/{数据　　obj: $ (), 　　标签:节点, 　　url: url 　　}；　　params.cache.push(数据); 　　}); 　　　　var加载=function () { 　　圣=$ var(窗口).scrollTop (), 　　某事=圣+ $(窗口).height (); 　　(params . each美元。缓存、功能(我数据){ 　　var=data.obj阿, 　　标签=data.tag, 　　url=data.url; 　　如果(o) { 　　直贴=o.position()上; 　　posb=职位+ o.height (); 　　如果圣& & ((post> <某事)| |(圣& & posb posb> <某事)){ 　　如果(标签===img) { 　　o。attr (" src ", url); 　　其他}{ 　　o.load (url); 　　} 　　数据。obj=零; 　　} 　　} 　　}); 　　返回错误; 　　}；　　　　加载(); 　　美元(窗口)。绑定(“滚动”,加载); 　　}；　　}) (jQuery); 　　之前　　　　

然后在底部初始化
　　

　　　　　　美元(文档)。准备好(函数(){//实现图片慢慢浮现出来的效果　　美元(img)。负载(函数(){//图片默认隐藏　　(美元)hide ();//使用渐明特效　　(美元).fadeIn (“5000”); 　　});//异步加载图片,实现逐屏加载图片　　$ (" .scrollLoading ") .scrollLoading (); 　　}); 　　　　

需要修改img标签为
　　

　　　　　　& lt; img类=皊crollLoading data-url”=巴枷?logo.jpg”src=" https://www.yisu.com/zixun/images/load.gif "/比; 　　之前　　　　

data-url表示将要异步加载的图片,src表示首先加载的图片(一般会是小图片,或者是一个动画,网页中全部的src链接同一个图片,这样网页就加载快好多,这个时候再异步的加载要加载的图片,也就现在要说的功能)
　　

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。