wap网站生成,建立门户网站的程序,外贸网站外链怎么做,百度云官网首页简介lazyload.js用于长页面图片的延迟加载#xff0c;视口外的图片会在窗口滚动到它的位置时再进行加载#xff0c;这是与预加载相反的。优点#xff1a;它可以提高页面加载速度#xff1b;在某些情况清晰它也可以帮助减少服务器负载。安装bower安装#xff1a;$ bower in…简介lazyload.js用于长页面图片的延迟加载视口外的图片会在窗口滚动到它的位置时再进行加载这是与预加载相反的。优点它可以提高页面加载速度在某些情况清晰它也可以帮助减少服务器负载。安装bower安装$ bower install jquery.lazyloadnpm安装:$ npm install jquery-lazyload 使用lazyload依赖与jquery。所以先引入jquery和lazyloadscript srcjquery.js/script
script srcjquery.lazyload.js/script1.将图片路径写入data-original属性2.给lazyload的图片增加一个名为lazy的class3.选择所有要lazyload的图片img.lazy执行lazyload();img classlazy data-originalimg/example.jpg stylemargin-top:1000px height200
script$(function(){$(img.lazy).lazyload();})
/script注意必须设置图片的高度或者宽度否则插件可能无法正常工作提前加载——Thresholdlazyload默认是当滚动到该图片位置时加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xx px时就加载。 $(function(){$(img.lazy).lazyload({threshold :20});})上面的例子设置了滚动到距离图片20px时图片就开始再开始加载事件触发(可以是jquery事件也可以是自定义事件)——Event当触发定义的事件时图片才开始加载 $(function(){$(img.lazy).lazyload({event : click});})上面的例子使图片点击后才开始加载Tip:你可以使用这个来实现图片的延迟加载$(function() {$(img.lazy).lazyload({event : sporty});
});$(window).bind(load, function() {var timeout setTimeout(function() {$(img.lazy).trigger(sporty)}, 5000);
});上面的代码在页面加载完毕后五秒才开始加载图片设定效果——Effects插件默认的加载效果是 show() ,你可以使用任何你想要的效果。下面的代码使用了 fadeIn()$(img.lazy).lazyload({effect : fadeIn
});滚动容器内的图片——container插件也可以使用在滚动容器内的图片上。下面的div拥有scrollerbar内容的内容进行滚动滚到图片位置时图片开始加载div styleheight:600px;overflow:scroll idcontainerimg classlazy data-originalimg/example.jpg alt stylemargin-top:1000px height200
/div
script$(function(){$(img.lazy).lazyload({container: $(#container)});})
/script不顺序排列的图片插件会执行一个寻找未加载图片的循坏该循环会检查图片是否可见默认情况下当第一个视图外的图片被找到循环就会停止 。但是存在一种情况页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载。这种情况下就可以将 failurelimit 设为 10 它令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个恶心的布局, 请把这个参数设高一点。代码$(img.lazy).lazyload({failure_limit : 10
});处理隐藏图片——skip_invisible为了提升性能插件默认忽略隐藏的图片如果想要加载隐藏图片.设置skip_invisible为false;注意Webkit浏览器将自动把没有宽度和高度的图像视为不可见$(img.lazy).lazyload({skip_invisible : true
});
