lazyload.js延迟加载

末蓝、 2022-08-21 01:14 374阅读 0赞

图片延迟加载

互联网加载图片很多，需要用户看到的先加载，所以使用延迟加载

首先引入juery和js：jquery.lazyload.js，

简单的方法是在img标签上添加data-original后面跟的是加载完成要显示的图片，而src上是图片没有加载成功的时候显示的图片

参数

placeholder : "img/grey.gif",     //用图片提前占位
    effect : "fadeIn",    //载入使用何种效果,effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
    threshold : 200,    //提前开始加载
    event : "click",      //事件触发时才加载,event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标划过或点击图片才开始加载,后两个值未测试…
    failurelimit : 10,     //图片排序混乱时 ,
    failurelimit,值为数字.

在js中添加

如果img是动态加载的则，可以

$(document).ready(function() {
    		$(".shop_deimgbox img").each(function(){
    			var src=$(this).attr("src");
    			$(this).attr("data-original",src);
    			$(this).attr("src","${_staticRes}/img/loading_658_200.gif");
    		});
    		
            $("img").lazyload({ 
            	placeholder : "${_staticRes}/img/loading792_400.gif",
            	effect: "fadeIn"
       		});
        });

谢谢支持，多少都行

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4MzMxNTQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA4MzMxNTQ_size_16_color_FFFFFF_t_70]: /images/20220731/5107ae2bed49409ea21f046582a5353b.png