JS图片懒加载技术实现过程解析
懒加载技术
懒加载（LazyLoad）是前端优化的一种有效方式，极大的提升用户体验，图片一直是页面加载的流浪大户，现在一张图片几兆已经是很正常的事，远远大于代码的大小。
原理：页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来。
所用相关技术：给img加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute(’src’),再赋值给img.setAttribute(’src’)）。
jqueryLazyload方式
<!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='https://www.haobala.com/bcjs/js/images2/1.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/2.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/3.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/4.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/5.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/6.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/7.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/1.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/2.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/3.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/4.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/5.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/6.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/7.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/1.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/2.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/3.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/4.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/5.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/6.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/7.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/1.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/2.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/3.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/4.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/5.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/6.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/7.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/1.jpg' /> <img src='https://www.haobala.com/bcjs/js/images2/2.jpg' /> <script src='https://www.haobala.com/bcjs/js/jquery-1.11.1.min.js'></script> <script src='https://www.haobala.com/bcjs/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 src='https://www.haobala.com/bcjs/images/blank.gif' data-echo='images/big-1.jpg'></div>
<script src='https://www.haobala.com/bcjs/js/echo.min.js'></script><script>Echo.init({ offset: 0,//离可视区域多少像素的图片可以被加载 throttle: 0 //图片延时多少毫秒加载}); </script>
说明：blank.gif是一张背景图片，包含在插件里了。图片的宽高必须设定，当然，可以使用外部样式对多张图片统一控制大小。data-echo指向的是真正的图片地址。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. AspectJ领导人Adrian Colyer跳槽到Spring2. Django中的DateTimeField和DateField实现3. 如何理解Python中包的引入4. Django后端按照日期查询的方法教程5. SpringBoot 开发提速神器 Lombok+MybatisPlus+SwaggerUI6. 浅谈Django 页面缓存的cache_key是如何生成的7. Java实现三子棋小游戏8. ASP中RecordSet Open和Connection.Execute一些区别与细节分享9. JavaScript实时更新当前的时间的示例代码10. Python 使用 PyQt5 开发的关机小工具分享
网公网安备