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 图片延迟加载并等比缩放插件
Nov 09 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
微信小程序 教程之引用
Oct 18 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
Node 代理访问的实现
Sep 19 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
phpmyadmin操作流程
2006/10/09 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
跟着JQuery API学Jquery 之三 筛选
2010/04/09 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
jquery动态加载js/css文件方法(自写小函数)
2014/10/11 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
目前最全的python的就业方向
2018/06/05 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
法定代表人授权委托书
2014/04/04 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
办公经费申请报告
2015/05/15 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
复活读书笔记
2015/06/29 职场文书
MongoDB数据库的安装步骤
2021/06/18 MongoDB
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js