JS实现图片懒加载
作者:互联网
JS实现图片懒加载
懒加载技术
懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。
原理:页面加载后只让文档可视区内的图片显示,其它不显示,随着用户对页面的滚动,判断其区域位置,生成img标签,让到可视区的图片加载出来。
所用相关技术:给img加属性 (例如data-src),将图片的地址赋值给他,这样就生成img标签后再把data-src的值赋给img的src(通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src'))。
jqueryLazyload方式
下载链接:https://pan.baidu.com/s/1gyIzuHPfE7xvztwd8v8qGg 密码:48kw
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding: 0; } .wrap{ overflow: hidden; width:915px; background:#2d2d2d; margin:50px auto; border-radius:10px; /*font-size:0px;*/ } .wrap img{ float:left; display: block; width:280px; height:180px; margin:10px 10px; border:2px solid #7c7c7c; border-radius:10px; } </style> </head> <body> <div class="wrap"> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <img src="js/images2/3.jpg" /> <img src="js/images2/4.jpg" /> <img src="js/images2/5.jpg" /> <img src="js/images2/6.jpg" /> <img src="js/images2/7.jpg" /> <img src="js/images2/1.jpg" /> <img src="js/images2/2.jpg" /> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/lazyload.js"></script> <script> $("img").lazyload({ placeholder :"images2/loading.gif", //用图片提前占位 // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏 effect: "fadeIn", // 载入使用何种效果 // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn threshold: 200, // 提前开始加载 // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉 // event: 'click', // 事件触发时才加载 // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试… //container: $("#container"), // 对某容器中的图片实现效果 // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片 //failurelimit : 10 // 图片排序混乱时 // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题. }); </script> </div> </body> </html>
echo.js方式
echo.js是一款非常简单实用轻量级的图片延时加载插件,如果你的项目中没有依赖jquery,那么这将是个不错的选择,50行代码,压缩后才1k。当然你完全可以集成到自己项目中去。
下载地址:https://github.com/helijun/helijun/tree/master/plugin/echo
<style> .demo img { width: 736px; height: 490px; background: url(images/loading.gif) 50% no-repeat;} </style>
<div class="demo"> <img class="lazy" src="images/blank.gif" data-echo="images/big-1.jpg"> </div>
<script src="js/echo.min.js"></script> <script> Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 0 //图片延时多少毫秒加载 }); </script>
说明:blank.gif是一张背景图片,包含在插件里了。图片的宽高必须设定,当然,可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
更多阅读:
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版):https://www.jb51.net/article/98692.htm
前端实现图片懒加载(lazyload)的两种方式
:https://www.cnblogs.com/liliangel/p/6122836.htmljs实现图片懒加载:https://www.jianshu.com/p/4f6ea540516a
标签:src,https,img,JS,lazyload,加载,图片 来源: https://www.cnblogs.com/-wenli/p/11154076.html