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 ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js读写json文件实例代码
Oct 21 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
QRCode.js二维码生成并能长按识别
Oct 16 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
说说如何在Vue.js中实现数字输入组件的方法
Jan 08 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 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
PHP封装的字符串加密解密函数
2015/12/18 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
jquery photoFrame 图片边框美化显示插件
2010/06/28 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
js强制把网址设为默认首页
2015/09/29 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
2015/11/06 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
webpack打包nodejs项目的方法
2018/09/26 NodeJs
Python中的默认参数详解
2015/06/24 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
浅谈Python中的字符串
2020/06/10 Python
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
办公室内勤岗位职责范本
2013/12/09 职场文书
申报职称专业技术个人的自我评价
2013/12/12 职场文书
校园新闻广播稿
2014/01/10 职场文书
社会保险接收函
2014/01/12 职场文书
高中生活自我鉴定
2014/01/18 职场文书
前厅收银主管岗位职责
2014/02/04 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
加班费申请报告
2015/05/15 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python