图片懒加载指的是在浏览过程中随着需要才被加载出来，例如某宝上面浏览商品时，会伴随很多的图片，如果一次全部加载出来的话，显然资源有些浪费，并且加载速度也会相对降低，那么懒加载的实现很重要。即随着浏览翻阅时，下面的图片才被加载出来，这样又不浪费带宽，访问网页速度也很快，用户体验也会有所提升。

说了这么多，其实所需要注意的要点有：

  1. 屏幕可视区域的高度
  2. 每张图片在文档中的高度
  3. 图片符合要求进行加载时，将图片地址赋值给属性 src
  4. 对屏幕滚动事件进行监控
  5. 首次进入网页未滑动屏幕时要显示的图片

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>图片懒加载实现</title>

     <style>

         img{

             width: 300px;

         }

     </style>

 </head>

 <body>

 <div>

     <p><img src="" data-original="./Saved Pictures/shawu.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/ass.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/LmLm.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/和服.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/花亭.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/康娜.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/初音未来.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/红发少女.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/shawu.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/ass.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/LmLm.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/和服.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/花亭.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/康娜.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/初音未来.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/红发少女.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/shawu.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/ass.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/LmLm.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/和服.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/花亭.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/康娜.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/初音未来.jpg" /></p>

     <p><img src="" data-original="./Saved Pictures/红发少女.jpg" /></p>

 </div>

 <script src="jquery-3.2.1.slim.js"></script>

 <script>

     var wHeight=$(window).height(); //获取屏幕可视高度

     $('img').each(function () {     //对图片进行循环

         var ownHeight=$(this).offset().top;     //获取当前图片在文档中的位置

         if(ownHeight<=wHeight){     //如果当前图片位置在屏幕可视范围之内加载此图片

             $(this).attr('src',$(this).attr('data-original'));

         }

     });

     $(window).on('scroll',function(){       //添加屏幕滚动事件

         $('img').each(function () {

             var hasSorollTop=$(window).scrollTop();     //获取屏幕已滚动高度

             var ownHeight=$(this).offset().top;

             if(ownHeight<=(hasSorollTop+wHeight+500)){

                 //当图片在屏幕滚动时，距离可视区域500像素时加载此图片，

                 // 以保证查看此图时，下面的一张以提前加载完成

                 $(this).attr('src',$(this).attr('data-original'));

             }

         });

     });

 </script>

 </body>

 </html>

在进行JavaScript练习时，不要一下将代码写完，每进行一步要对其进行测试一下，不然到最后哪里出现错误修改起来相对比较麻烦。

原创不易，尊重版权。转载请注明出处：http://www.cnblogs.com/xsmile/

JavaScript之图片懒加载的实现的更多相关文章

  1. 基于javascript实现图片懒加载（亲测有效）

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

  2. javascript原生图片懒加载

    一,原生javascript图片懒加载 1. 使用方法,例如 // 要绑定的图片地址 <img data-src={url} alt=" "> 2. 在页面中引入下列原 ...

  3. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  4. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  5. js, javascript 图片懒加载 实例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript——图片懒加载

    前言 有一个朋友问我这个问题,刚好有时间,现在就简单的写个Demo~ github | https://github.com/wangyang0210/bky/tree/picLoadLazy 内容 ...

  7. JS图片懒加载

    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...

  8. 图片懒加载插件lazyload使用方法

    图片懒加载插件lazyload使用方法 一.如何使用: Lazy Load 依赖于 jQuery.引入文件 <script type="text/javascript" sr ...

  9. 前端性能优化--图片懒加载(lazyload image)

    话说前头: 上次写了一篇webpack的学习心得,webpack能做到提升前端的性能,其模块打包最终生成一个或少量的文件能够减少对服务端的请求.除此之外,本次的图片懒加载(当然不仅限于图片,还可以有视 ...

随机推荐

  1. 第六章：Python基础の反射与常用模块解密

    本课主题 反射 Mapping 介绍和操作实战 模块介绍和操作实战 random 模块 time 和 datetime 模块 logging 模块 sys 模块 os 模块 hashlib 模块 re ...

  2. Java学习笔记14（面向对象七：final、static）

    final:意为最终,不可变,是一个修饰词 有时候一个类地功能被开发好了,不想让子类重写,修改,这里就会用到final关键字 final修饰类: 不可以被继承,但是可以继承其他类 示例: public ...

  3. Mysql 启动遇到 The server quit without updating PID file (/[FAILED]l/mysql/data/021rjsh216086s.pid)和Attempted to open a previously opened tablespace

    今天在测试服务器做调试的时候,遇到Mysql的启动问题,好像是PID文件找不到了. 不科学啊,前几天还好好的呀,我也没怎么乱搞啊,然后一通百度,找到了几个解决办法. 1.有可能是已经存在mysql进程 ...

  4. IIS 应用程序池自动停止

    IIS7 .NET Runtime version 2.0.50727.5420 - 执行引擎错误(000007FEE77AAF0E) (80131506) 装完系统,配置完IIS,发现.NET程序报 ...

  5. Python进阶内容（五）--- type和object的关系

    面向对象编程(OOP)的两大关系 继承与实现 继承关系: 子类继承自父类(base),可以使用父类的一些方法(method)和属性(attribute) 实现关系: 以类为模板,实例化一个对象,即:对 ...

  6. 【转载】ipcs与Linux共享内存

    一.共享内存相关知识 所谓共享内存,就是多个进程间共同地使用同一段物理内存空间,它是通过将同一段物理内存映射到不同进程的 虚拟空间来实现的.由于映射到不同进程的虚拟空间中,不同进程可以直接使用,不需要 ...

  7. 一个标准的WebView示例

    xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  8. MySQL常用查询语句汇总（不定时更新）

    在这篇文章中我会通过一些例子来介绍日常编程中常用的SQL语句   目录: ## 1.数据库的建立     ## 1.数据库的建立   实例将ER图的形式给出:   由此转换的4个关系模式:      ...

  9. 洛谷 P3377 【模板】左偏树（可并堆）

    洛谷 P3377 [模板]左偏树(可并堆) 题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或 ...

  10. python笔记二（mysql数据库操作）

    python2.x使用MySQLdb python3.x使用pymysql代替MySQLdb 不过我使用的是python3.5,MySQLdb还是可以在python3.5使用的. #!/usr/bin ...