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

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

  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. Java学习笔记21（String类补充：正则表达式）

    正如python的re模块,不过Java和Python的正则表达式有一些区别,这里做简单介绍,具体的细节可以参考网上其他的文章: 功能:可以用于检验一个字符串,比如验证用户名,验证密码格式,验证是否是 ...

  2. Android查缺补漏（View篇）--自定义View利器Canvas和Paint详解

    上篇文章介绍了自定义View的创建流程,从宏观上给出了一个自定义View的创建步骤,本篇是上一篇文章的延续,介绍了自定义View中两个必不可少的工具Canvas和Paint,从细节上更进一步的讲解自定 ...

  3. java中重载一定在一个类里面吗?

    虽然这些概念在翻译成中文的过程中,有很多不同的翻译方式但本质上只有两种说法,就是Override和Overload其中,Overload一般都被翻译成重载而Override的翻译就乱七八糟了,所谓覆盖 ...

  4. VS2015配置内核WDK7600环境,32位下.

    VS2015配置内核WDK7600环境,32位下. 学习内核驱动的编写,就要会配置环境.不然总是用记事本编写.比较不方便. 环境配置如下. 1.首先下载WDK7600, 课堂资料代码中已经上传.链接: ...

  5. C#学习笔记-组合模式

    什么是组合模式? 组合模式(Composite):将对象组合成树形结构以表示“部分-整体”的层次结构. 组合模式使得用户对单个对象和组合对象的使用具有一致性. 何时使用组合模式? 当需求中是体现部分与 ...

  6. java.lang.Class类中的某些方法

    反射的代码会经常遇到,Class类中方法真的多,且用的少,大多用在底层源码这块,既然看到了,就记录一下吧,说不定以后厉害了,自己封装框架,haha getComponentType()方法: Syst ...

  7. AbstractQueuedSynchronizer的简单分析

    说明:本作者是文章的原创作者,转载请注明出处:本文地址:http://www.cnblogs.com/qm-article/p/7955781.html 一.AbstractQueuedSynchro ...

  8. 从头开始基于Maven搭建SpringMVC+Mybatis项目(1)

    技术发展日新月异,许多曾经拥有霸主地位的流行技术短短几年间已被新兴技术所取代. 在Java的世界中,框架之争可能比语言本身的改变更让人关注.近几年,SpringMVC凭借简单轻便.开发效率高.与spr ...

  9. 图的存储结构的实现(C/C++实现)

    存档: #include <stdio.h> #include <stdlib.h> #define maxv 10 #define max 10 typedef char e ...

  10. BZOJ:4816: [Sdoi2017]数字表格

    4816: [Sdoi2017]数字表格 Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 501  Solved: 222[Submit][Status ...