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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
jQuery lazyload 的重复加载错误以及修复方法
Nov 19 Javascript
js工具方法弹出蒙版
May 08 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
Sep 27 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
vue 之 css module的使用方法
Dec 04 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
详解实现vue的数据响应式原理
Jan 20 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 图片上添加透明度渐变的效果
2009/06/29 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
php中define用法实例
2015/07/30 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
js word表格动态添加代码
2010/06/07 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
JS实现在线ps功能详解
2019/07/31 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python numpy数组中的复制知识解析
2020/02/03 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
为什么说python更适合树莓派编程
2020/07/20 Python
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
网络方面基础面试题
2012/11/16 面试题
计算机应用与科学个人的自我评价
2013/11/15 职场文书
人力资源专业推荐信
2013/11/29 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
会计实训总结范文
2015/08/03 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis