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

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

  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. C语言循环的实现

    在C语言中采用3中语法来实现循环,它们分别是while.for.do while,本文将分别说明这三种循环的实现,并对它们的运行效率进行比较. do while 首先来看do while的实现:下面是 ...

  2. 4、ABPZero系列教程之拼多多卖家工具 集成短信发送模块

    ABPZero并没有手机短信发送功能,现在我们来集成一个,为后面注册.登录作铺垫. 阿里云短信服务 首先需要在阿里云开通短信服务,连接地址 开通后,在签名管理中添加一个签名 在模板管理中添加一个模板, ...

  3. Centos7（Linux）网络配置，自动获取ip地址

    Centos7.0 Vmware 网络桥接配置,利用DHCP自动获取ip地址 首先要将Vmware10.0.3设置为桥接模式. CentOS 7.0默认安装好之后是没有自动开启网络连接的! cd  / ...

  4. RED_HAWK：基于PHP实现的信息收集与SQL注入漏洞扫描工具

    无事早上就去逛freebuf看到一款不错的工具,打算介绍给大家 RED_HAWK:基于PHP实现的信息收集与SQL注入漏洞扫描工具 RED HAWK 最新版本:v1.0.0[2017年6月11日] 下 ...

  5. Codeforces 791B Bear and Friendship Condition(DFS，有向图)

    B. Bear and Friendship Condition time limit per test:1 second memory limit per test:256 megabytes in ...

  6. POJ2689-Prime Distance-区间筛素数

    最近改自己的错误代码改到要上天,心累. 这是迄今为止写的最心累的博客. Prime Distance Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  7. ubuntu sendmail配置发送邮件

    ubuntu中sendmail函数可以很方便的发送邮件,ubuntu sendmail先要安装两个包. 必需安装的两个包: 代码  sudo apt-get install sendmail sudo ...

  8. python云算法

    http://www.runoob.com/python3/python3-basic-operators.html 本章节主要说明Python的运算符.举个简单的例子 4 +5 = 9 . 例子中, ...

  9. python 元组学习

    元组用tuple表示,用,分割开,和列表类似,但是没有排序修改等高级操作.简单地说就是终态的...... >>> tuple1 = (1,2,3)>>> type( ...

  10. hbase安装版本

    Hbase的安装部署,依赖HDFS,Zookeeper-3.4.5,jDK1.7以上,Hadoop-2.5.0以上