JS图片懒加载技术实现过程解析


Posted in Javascript onJuly 27, 2020

懒加载技术

懒加载(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="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 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
微信小程序实现文件预览
Oct 22 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 Vue.js
Element Notification通知的实现示例
Jul 27 #Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 #Javascript
Element Backtop回到顶部的具体使用
Jul 27 #Javascript
解决vue中的无限循环问题
Jul 27 #Javascript
Element MessageBox弹框的具体使用
Jul 27 #Javascript
Vue 组件复用多次自定义参数操作
Jul 27 #Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 #Javascript
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jquery+css3实现网页背景花瓣随机飘落特效
2015/08/17 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
JavaScript实现复制文章自动添加版权
2016/08/02 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Tornado Web服务器多进程启动的2个方法
2014/08/04 Python
python实现扫描ip地址的小程序
2019/04/16 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python实现布隆过滤器及原理解析
2019/12/08 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python中有帮助函数吗
2020/06/19 Python
python asyncio 协程库的使用
2021/01/21 Python
html5实现输入框fixed定位在屏幕最底部兼容性
2020/07/03 HTML / CSS
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
给护士表扬信
2014/01/19 职场文书
环保公益广告语
2014/03/13 职场文书
农林环境专业求职信
2014/03/13 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书