js前端实现图片懒加载(lazyload)的两种方式


Posted in Javascript onApril 24, 2017

在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。

思路:

将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。

关于各种宽高:

  1. 页可见区域宽: document.body.clientWidth;
  2. 网页可见区域高: document.body.clientHeight;
  3. 网页可见区域宽: document.body.offsetWidth (包括边线的宽);
  4. 网页可见区域高: document.body.offsetHeight (包括边线的宽);
  5. 网页正文全文宽: document.body.scrollWidth;
  6. 网页正文全文高: document.body.scrollHeight;
  7. 网页被卷去的高: document.body.scrollTop;
  8. 网页被卷去的左: document.body.scrollLeft;
  9. 网页正文部分上: window.screenTop;
  10. 网页正文部分左: window.screenLeft;
  11. 屏幕分辨率的高: window.screen.height;
  12. 屏幕分辨率的宽: window.screen.width;
  13. 屏幕可用工作区高度: window.screen.availHeight;

示例:

jqueryLazyload方式

下载地址:https://github.com/helijun/helijun/blob/master/plugin/lazyLoad/jquery.lazyload.js

<section class="module-section" id="container">
   <img class="lazy-load" data-original="../static/img/loveLetter/teacher/teacher1.jpg" width="640" height="480" alt="测试懒加载图片"/>
</section>
require.config({
  baseUrl : "/static",
  paths: {
    jquery:'component/jquery/jquery-3.1.0.min'
    jqueryLazyload: 'component/lazyLoad/jquery.lazyload',//图片懒加载
  },
  shim: {
    jqueryLazyload: {
      deps: ['jquery'],
      exports: '$'
    }
  }
});
require(
  [
    'jquery',
    'jqueryLazyload'
  ], 
  function($){
    $(document).ready(function() {   
      $("img.lazy-load").lazyload({ 




effect : "fadeIn", //渐现,show(直接显示),fadeIn(淡入),slideDown(下拉)





threshold : 180, //预加载,在图片距离屏幕180px时提前载入





event: 'click', // 事件触发时才加载,click(点击),mouseover(鼠标划过),sporty(运动的),默认为scroll(滑动)





container: $("#container"), // 指定对某容器中的图片实现效果





failure_limit:2 //加载2张可见区域外的图片,lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况




}); 



});

});

为了代码可读性,属性值我都写好了注释。值得注意的是预制图片属性为data-original,并且最好是给予初始高宽占位,以免影响布局,当然这里为了演示我是写死的640x480,如果是响应式页面,高宽需要动态计算。

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指向的是真正的图片地址。

 总结:

两者都非常简单,实现思路是一样的,只是jquerylazyload多几个属性。其实常用的echo就足够了,并且完全可以集成到自己项目中的公共js中,图片懒加载是相当常见且简单实用的功能,如果你的项目中还是傻瓜式的一次性全部加载,那么请花20分钟优化下~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 Javascript
javascript 简练的几个函数
Aug 29 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
JavaScript中的this关键字使用方法总结
Mar 13 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
详解vue-cli项目中怎么使用mock数据
May 29 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
Vue实现滑动拼图验证码功能
Sep 15 Javascript
Layui动态生成select下拉选择框不显示的解决方法
Sep 24 Javascript
jQuery+ajax实现文件上传功能
Dec 22 jQuery
angularjs中的$eval方法详解
Apr 24 #Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 #Javascript
angularjs中回车键触发某一事件的方法
Apr 24 #Javascript
浅谈angularjs中响应回车事件
Apr 24 #Javascript
老生常谈angularjs中的$state.go
Apr 24 #Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 #Javascript
详谈angularjs中路由页面强制更新的问题
Apr 24 #Javascript
You might like
多人战的战术与战略
2020/03/04 星际争霸
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
vue中使用vue-cli接入融云实现即时通信
2019/04/19 Javascript
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python单元测试unittest实例详解
2015/05/11 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
如何在python中执行另一个py文件
2020/04/30 Python
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
高中毕业自我鉴定
2013/12/22 职场文书
商务会议邀请函
2014/01/09 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
少先队入队活动方案
2014/02/08 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python