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

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

  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. sql基本知识

    1.类型转换 用convert,cast float转换出现科学计数字母的问题:可以先转成numeric再转成varchar declare @fl float set @fl=1234567.123 ...

  2. 史上最简单的js+css3实现时钟效果

    今天我看到百度搜索的时间那个效果不错,于是就产生了模仿一下的效果,不过为了节省时间,就随便布了下局,废话不多说,先看看效果吧,顺便把百度的效果也拿过来. 对比样子差了好多啊,但是基本功能都是实现了的, ...

  3. Git学习随笔

    前期准备事项: 1.注册GitHub账号,注册地址:https://github.com 2.下载Git for Windows工具,下载地址:http://gitforwindows.org,软件安 ...

  4. python通过getopt模块获取执行命令参数

    python脚本和shell脚本一样可以获取命令行的参数,根据不同的参数,执行不同的逻辑处理. 通常我们可以通过getopt模块获得不同的执行命令和参数. 下面我通过新建一个test.py的脚本解释下 ...

  5. 接口自动化测试框架 (一) ：APIAutoTest框架

    前言 随着测试技术的发展,接口自动化测试逐渐成为各大公司投入产出比最高的测试技术.介入时间早,执行效率高,稳定性高的优点,让越来越多的公司引入接口自动化测试. 框架简介 APIAutoTest是处理A ...

  6. webAPI+angularJS文件上传和下载

    开发框架 前端 angularJS1.6 下载和保存文件FileSaver:https://github.com/eligrey/FileSaver.js/ 后端 .net WebAPI 1 导入Ex ...

  7. asp.net core 多端口监听&日志服务

    1 配置多个端口监听 HostingAbstractionsWebHostBuilderExtensions. public static IWebHostBuilder UseUrls(this I ...

  8. ECJTUACM16 Winter vacation training #1 题解&源码

    //寒假训练赛,第一次拿第一,感觉很爽哦,AC3题! A------------------------------------------------------------------------ ...

  9. 【Java学习笔记之六】java三种循环(for,while,do......while)的使用方法及区别

    第一种:for循环 循环结构for语句的格式:       for(初始化表达式;条件表达式;循环后的操作表达式) { 循环体;    } eg: class Dome_For2{ public st ...

  10. Gym 100952I&&2015 HIAST Collegiate Programming Contest I. Mancala【模拟】

    I. Mancala time limit per test:3 seconds memory limit per test:256 megabytes input:standard input ou ...