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

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

  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 の 网络编程基础(二)

    本課主題 Python中的作用域补充 socketserver 源码 线程的介绍和操作实战 进程的介绍和操作实战 协程的介绍和操作实战 本周作业 Python中的作用域补充 Python世界里沒有块级 ...

  2. 关于S/4HANA里Sales Office 和Sales Organization那些事儿

    今天这篇文章来自我的成都同事Zhang Sean(张正永). Sean也是一位在SAP行业摸爬滚打多年的老兵了,2009年从大学硕士毕业之后就进入了SAP Labs从事开发工作,目前是SAP 成都S/ ...

  3. Git的使用-如何将本地项目上传到Github

    默认你的电脑上已经安装了git. 第一步:我们需要先创建一个本地的版本库(其实也就是一个文件夹). 你可以直接右击新建文件夹,也可以右击打开Git bash命令行窗口通过命令来创建. 现在我通过命令行 ...

  4. Ubuntu 设置内核版本的GRUB默认启动

    注:我只是一只小小的搬运工.这篇文章内容摘自: https://www.calazan.com/how-to-set-an-older-kernel-version-as-the-default-in ...

  5. 推荐几个不错的 java 教程和 HTML 教程

    Java入门第一季 Java入门第二季 2小时学会Spring Boot Java模板引擎之Freemarker HTML+CSS基础课程 H5+JS+CSS3实现七夕言情 jQuery基础系列

  6. Java数据结构和算法（十一）——红黑树

    上一篇博客我们介绍了二叉搜索树,二叉搜索树对于某个节点而言,其左子树的节点关键值都小于该节点关键值,右子树的所有节点关键值都大于该节点关键值.二叉搜索树作为一种数据结构,其查找.插入和删除操作的时间复 ...

  7. deeplearning.ai 人工智能行业大师访谈 Geoffrey Hinton 听课笔记

    1. 怀揣着对大脑如何存储记忆的好奇,Hinton本科最开始学习生物学和物理学,然后放弃,转而学习哲学:然后觉得哲学也不靠谱,转而学习心理学:然后觉得心理学在解释大脑运作方面也不给力,转而做了一段时间 ...

  8. js面向对象学习笔记（五）：tab切换

    重点是this指向问题 <style> .hide{display: none;} #box div,#box1 div{display: none;} .hover{background ...

  9. LuceneNet 实现快速大文件大数据查询

    做过站内搜索的朋友应该对Lucene.Net不陌生,因为用普通的sql  like查询肯定是不行的,太慢了. 首先说明的是--Lucene.Net只是一个全文检索开发包,不是一个成型的搜索引擎, 它的 ...

  10. Tomcat源码调试环境搭建

    我们一般都是为了解决某个问题,才去看源码的.Java体系就是这点好处,源码唾手可得.遇到问题,最后的解决方法总是可以从源码中找到. 参考了网上的文章,过程整理如下: 1. 下载和导入 官网下载编译好的 ...