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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
Canvas实现放射线动画效果
Feb 15 Javascript
Vuex简单入门
Apr 19 Javascript
解读ES6中class关键字
Nov 20 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Vue formData实现图片上传
Aug 20 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
php下将XML转换为数组
2010/01/01 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
详解angularJS动态生成的页面中ng-click无效解决办法
2017/06/19 Javascript
python求pi的方法
2014/10/08 Python
python获取目录下所有文件的方法
2015/06/01 Python
python for 循环获取index索引的方法
2019/02/01 Python
Django中URL的参数传递的实现
2019/08/04 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
品牌推广策划方案
2014/05/28 职场文书
对照检查剖析材料
2014/09/30 职场文书
交通事故和解协议书
2015/01/27 职场文书
户外亲子活动总结
2015/05/08 职场文书
2016年元旦主持词
2015/07/06 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android