jquery.lazyload插件实现图片懒加载
首先,需要导入jquery库以及jquery.lazyload插件,个人感觉引用外部的资源网页的加载速度会快一些!
其次,在需要实现懒加载的img标签上添加一个类名"lazy-load",将img标签的属性src换成data-original
![]()
最后是js代码
$("img.lazy-load").lazyload({effect: "show", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)threshold: 180, //预加载，在图片距离屏幕180px时提前载入event: 'click', // 事件触发时才加载，click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll（滑动）container: $("#moveDive"), // 指定对某容器中的图片实现效果failure_limit: 1 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况});用起来还是挺方便的!
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！