最近在写项目的时候，列表页需要加载很多图片，下载图片花费很多时间，那么就会影响这个网页的加载速度，用户体验差，很可能出现卡顿现象。因此，有选择性的请求图片，能够明显的减少服务器压力和流量，也能够减少游览器的负担。
将页面上img的src属性设置为默认图片，而图片真实路径设置在data-original中。当滚动页面的时候lazyload.js计算图片位置和滚动的位置，先加载默认图片，后加载真实图片。
注意先写jquery插件
img写法
$('.info_img').lazylod();
threshold : 200 //设置灵敏度，表示进入显示区域还有200像素就开始加载
effect : "fadeIn" //使用淡入特效
failure_limit : 10 //容差范围，一定要设置此值，原因说明请参考原文档
container: $("#container") //使用父容器，父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性
event : "click" //修改触发事件为单击
最近在写项目的时候，列表页需要加载很多图片，下载图片花费很多时间，那么就会影响这个网页的加载速度，用户体验差，很可...
插件类 load-lazy 下拉才刷新图片的懒加载 可以去npmjs 官网查找插件使用方法
jQuery 使用方法： 1.引用jQuery和jQuery.lazyload.js 2.给图片绑定一个data-...
1.这款插件以来jquery.js，所以首先要引用jquery文件 2.要有img标签 图片的真实路径要写在dat...
jquery.lazyload.js 如何使用 设置占位图片 设置临界点 设置事件触发加载 使用特效 设置滚动容器...
前端入坑纪 45 今天来分享个已经满大街的效果，如题，原理很简单，其实全靠一个getBoundingClientR...
移动端延时加载 我是用的第三方控件：echo.min.js ，直接百度就可以搜索到（不需要依赖jquery等其...
一、JavaScript 加载图片 JavaScript 中加载图片，两种使用方法 加载背景图片 backgro...
echo.min.js 一款非常简单实用轻量级的图片延时加载插件echo.js，如果你的项目中没有依赖jquery...
使用方法 引用jquery和jquery.lazyload.js到你的页面 | 1 2 | <``script s...
本文标题：图片延时加载插件jquery.lazyload.js使用方法
本文链接：https://www.haomeiwen.com/subject/mpbxkftx.html
网友评论