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 相关文章推荐
Javascript 获取链接(url)参数的方法[正则与截取字符串]
Feb 09 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
apply和call方法定义及apply和call方法的区别
Nov 15 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
分享bootstrap学习笔记心得(组件及其属性)
Jan 11 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
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
对javascript和select部件的结合运用
2006/10/09 PHP
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery parent和parents的区别分析
2013/10/02 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
js实现随机数小游戏
2019/06/28 Javascript
JS实现点星星消除小游戏
2020/03/24 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python获取系统默认字符编码的方法
2015/06/04 Python
windows下python安装pip方法详解
2020/02/10 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
蔻驰法国官网:COACH法国
2018/11/14 全球购物
英国标准协会商店:BSI Shop
2019/02/25 全球购物
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
工作自我评价分享
2013/12/01 职场文书
《云房子》教学反思
2014/04/20 职场文书
大学活动总结格式
2014/04/29 职场文书
小学生校园广播稿
2014/09/28 职场文书
2015年党小组工作总结
2015/05/26 职场文书
好员工观后感
2015/06/17 职场文书
趣味运动会新闻稿
2015/07/17 职场文书