前言:

        本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽。

        本篇文章为您分析一下原生JS实现图片懒加载效果

页面需求

  1. 1. 在用户刚刚进入页面时,先加载首屏的所有图片,如果用户还想看更多的图片,当用户滑动滚动条时再加载出现在视口内的图片。

HTML结构

  1. <div class="lazy">
  2. <img src="default.png" alt=""
  3. data-src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=148443545,806875479&fm=26&gp=0.jpg">
  4. <img src="default.png" alt=""
  5. data-src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3001021586,810308097&fm=26&gp=0.jpg">
  6. <img src="default.png" alt=""
  7. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786712&di=ffcad1073ba07e3af701348e14613cc2&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn01%2F246%2Fw640h406%2F20180904%2Fd41c-hiqtcan7167756.jpg">
  8. <img src="default.png" alt=""
  9. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786712&di=f68274504cf3e1d9a8f32d19bc305154&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h426%2F20180112%2F69ae-fyqnick8791762.jpg">
  10. <img src="default.png" alt=""
  11. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786711&di=049d837a5c9d2dc98ff53c48d4557160&imgtype=0&src=http%3A%2F%2Fpicture.ik123.com%2Fuploads%2Fallimg%2F141031%2F17-141031160326.jpg">
  12. <img src="default.png" alt=""
  13. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786710&di=f87e22bfe5da4ea2d088519f8958816f&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F331%2Fw870h1061%2F20180915%2FK-2y-hikxxna1448280.jpg">
  14. <img src="default.png" alt=""
  15. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786709&di=bc67716679d7234d4082886458a5d8cb&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F65%2F01%2F19300001035357130795018787137_950.jpg">
  16. <img src="default.png" alt=""
  17. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786708&di=7ba455ddcd0537f5ef51c8fff325e865&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201511%2F24%2F20151124145437_w4dVB.jpeg">
  18. <img src="default.png" alt=""
  19. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786707&di=9fb358257a48fe9c79c72c4fc656e6b1&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20160906%2F20160906153420_f9b85f408460d00488f5f9e813b7e2a7_6.jpeg">
  20. <img src="default.png" alt=""
  21. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786804&di=64c75d1d8ecf82693e58766e8b606873&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fpic%2Fitem%2Fcd5bb743ad4bd1136235f0ce5aafa40f49fb059b.jpg">
  22. <img src="default.png" alt=""
  23. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786804&di=e53121cfa8f2448ee5758372d9f80a45&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20180512%2F50ad001e559b4eb1b9c22aca65b0640d.jpeg">
  24. <img src="default.png" alt=""
  25. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786803&di=32564289c9ffb12d0747d122cf82751b&imgtype=0&src=http%3A%2F%2Fpic25.photophoto.cn%2F20121021%2F0035035953679533_b.jpg">
  26. <img src="default.png" alt=""
  27. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786803&di=065a222054f9aa35a6d80214c12bd210&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw562h464%2F20180119%2F8f01-fyqtwzu8355015.jpg">
  28. <img src="default.png" alt=""
  29. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588786802&di=53c06ed741f89e6ebf92a8f60c0eae57&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn17%2F307%2Fw640h467%2F20180709%2F6458-hezpzwu1922800.jpg">
  30. <img src="default.png" alt=""
  31. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958074&di=d09f2d50db3a63d0d5a3b5484dcaf2ba&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw558h559%2F20180211%2Fe4bf-fyrkuxt5566269.jpg">
  32. <img src="default.png" alt=""
  33. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958074&di=ab6c49cc5a1be598a1fa279a36a3e817&imgtype=0&src=http%3A%2F%2Fpic.makepolo.net%2Fnews%2Fallimg%2F20161228%2F1482940135505940.jpg">
  34. <img src="default.png" alt=""
  35. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958073&di=9a19d89171e8585e8ed5f19dbab33149&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn13%2F56%2Fw499h357%2F20181114%2Fb7e5-hnvukfe8184806.jpg">
  36. <img src="default.png" alt=""
  37. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958073&di=d81b5a7c3a09ce927c35c753251a3175&imgtype=0&src=http%3A%2F%2Fp3.ssl.cdn.btime.com%2Ft01c26630ad64f0175c.png%3Fsize%3D640x572">
  38. <img src="default.png" alt=""
  39. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958072&di=bf97ec847c6c10e4a0f3986dafca641b&imgtype=0&src=http%3A%2F%2Fupload.northnews.cn%2F2016%2F0905%2Fthumb_900_600_1473046880257.jpg">
  40. <img src="default.png" alt=""
  41. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958072&di=b445562cc398823b2fd859eec5312ba3&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20181025%2F21%2F1540472811-DTyBFexQio.jpg">
  42. <img src="default.png" alt=""
  43. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958069&di=64a0b81403b9a96b9cd3b4da5c2cd96b&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20141225%2Fmp620837_1419522163024_10.jpeg">
  44. <img src="default.png" alt=""
  45. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958066&di=dde85061135c43dc536cc983fa0e557e&imgtype=0&src=http%3A%2F%2Fwww.xiao89.com%2Fuploads%2Fallimg%2F190605%2F10-1Z605154546.jpg">
  46. <img src="default.png" alt=""
  47. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958066&di=956eb9de655a8879bcf015a953892104&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F480%2Fw640h640%2F20180920%2FrTAl-hikxxna3627881.jpg">
  48. <img src="default.png" alt=""
  49. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586588958065&di=88d01b1a1134ada3b601eb2c733379d3&imgtype=0&src=http%3A%2F%2Fimg.boqiicdn.com%2FData%2FBK%2FA%2F1811%2F2%2Fimg60655bdbcdef8b269_o.jpg">
  50. <img src="default.png" alt=""
  51. data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586589478110&di=56192deca9c7e85508b2075e91ad55b2&imgtype=0&src=http%3A%2F%2Fcdn6.hbimg.cn%2Fstore%2Fwm%2Fbigfiles%2F201351%2FD52586DA90B7D8B4D4A8CBC334.jpg">
  52. </div>

CSS样式

  1. .lazy {
  2. position: relative;
  3. text-align: center;
  4. }
  5. .lazy img {
  6. width: 327px;
  7. height: 275px;
  8. }

JS行为

JS大致思路
  1. 1. 获取滚动条高度
  2. 2. 获取浏览器视口的高度
  3. 3. 循环每一张图片并获取到每一张图片的高度偏移量
  4. 4. 如果当前的图片偏移量 < 滚动条的位置高度 + 浏览器窗口高度 (能出现在视口,我们正常能看见的区域)
  5. 5. 如果不是下载完再执行的情况
  6. 6. 根据图片的data-src属性设置图片的真实路径
  1. var dom = document.querySelectorAll(".lazy img"); // 获取所有的图片
  2. function lazy() {
  3. var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 获取滚动条的高度
  4. var windowHeight = window.innerHeight; // 获取视口高度
  5. for (var i = 0; i < dom.length; i++) {
  6. var imgHeight = dom[i].offsetTop; // 每张图片的偏移量
  7. if (imgHeight < scrollTop + windowHeight) { // 判断
  8. (function (j) {
  9. setTimeout(function () { // 用一个定时器,延迟多少秒后再渲染图片
  10. var newImage = new Image(); // 创建图片对象
  11. newImage.src = dom[j].getAttribute("data-src"); // 图片存储临时空间
  12. newImage.onload = function() {
  13. dom[j].src = dom[j].getAttribute("data-src"); // 设置图片的正确路径
  14. }
  15. },2000);
  16. })(i)
  17. }
  18. }
  19. }
  20. // 当滑动滚动条时
  21. window.onscroll = lazy;
  22. lazy();
这样图片的懒加载效果就完成了。下面来看一看插件版的使用方式

插件版JS代码 (lazy.js)

  1. if (!window.myPlugin) {
  2. window.myPlugin = {};
  3. }
  4. /**
  5. * 图片懒加载
  6. * @param { Object } dom 传入需要懒加载的图片元素
  7. * @param { Number } time 加载需要的时间
  8. */
  9. window.myPlugin.lazy = function (dom,time) {
  10. // 获取滚动条的位置高度 兼容处理 谷歌浏览器只认识document.body.scrollTop; 其他浏览器document.documentElement.scrollTop;
  11. var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;
  12. // 获取浏览器窗口高度 包含下面的滚动条高度
  13. var windowHeight = window.innerHeight;
  14. // 循环获取到每张图片
  15. for (var i = 0; i < dom.length; i++){
  16. // 获取每张图片距离页面上方的偏移量 注意offset的一些坑,offset并不是子元素相对于父元素的,而是相对于定位元素
  17. var imgHeight = dom[i].offsetTop;
  18. // 如果当前的图片偏移量 < 滚动条的位置高度 + 浏览器窗口高度 (能出现在视口,我们正常能看见的区域)
  19. if (imgHeight < scrollHeight + windowHeight) {
  20. (function (i) { // 此处为啥要使用立即执行函数,因为setTimeout是异步执行的
  21. setTimeout(function () {
  22. var newImage = new Image(); // 创建原始图片对象
  23. newImage.src = dom[i].getAttribute("data-src"); // 图片临时存储空间
  24. newImage.onload = function () { // 当图片资源加载完成后
  25. dom[i].src = dom[i].getAttribute("data-src"); // 设置图片的正确路径
  26. }
  27. },time);
  28. })(i);
  29. }
  30. }
  31. // 滚动时再次加载
  32. window.onscroll = function () {
  33. this.myPlugin.lazy(dom,time);
  34. }
  35. }
使用时这样使用
  1. <script src="../../plugin/lazy.js"></script>
  2. <script>
  3. var dom = document.querySelectorAll(".lazy img")
  4. this.myPlugin.lazy(dom,2000);
  5. </script>

结语

整完!

js 函数的多图片懒加载(lazy) 带插件版完整解析的更多相关文章

  1. js 函数的多图片预加载(preload) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...

  2. [js开源组件开发]图片懒加载lazyload

    图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...

  3. Zepto picLazyLoad Plugin,图片懒加载的Zepto插件

    嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...

  4. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  5. VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  6. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  7. 001_Chrome 76支持原生HTML 图片懒加载Lazy loading

    Table Of Content 什么是懒加载? 语法参数及使用方式? 有哪些特点? 与js有关的实践 什么是懒加载? 技术背景 Web应用需要经常向后台服务器请求资源(通过查询数据库,是非常耗时耗资 ...

  8. JS图片懒加载

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

  9. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

随机推荐

  1. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  2. IE不支持sessionStorage问题

    IE8及以上版本是支持的,如果你的项目在IE8及以上打开报错: 那是因为:页面要放在服务器上才能有效!!!!!!!!!!!!!!!!!!!!!!!!

  3. Java运行时数据区域划分

    Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁时间.根据<Java虚拟机规范(Java SE 7版>的规定,J ...

  4. maven聚合与继承笔记

    maven聚合 聚合的目的是为了快速构建项目,当我们有几个maven模块,想要一次性构建,而不是到每个模块下面去执行maven命令,这时候就需要使用maven聚合(或者称为多模块). 使用聚合的时候, ...

  5. PHP获取所有扩展及扩展下的所有函数签名生成php.snippet

    <?php $ext_info = array(); $modules = get_loaded_extensions(); foreach ($modules as $module) { $f ...

  6. python 函数--生成器

    一.生成器函数: 常规定义函数,使用yield语句而不是return语句返回结果.yield语句一次返回一个结果. 好处在于,不会一下占用很多内存生成数据. 本质:就是一个迭代器. python中提供 ...

  7. Linux基础篇,Shell

    一.基本知识 Shell Script是一种脚本.可以用来极大的简化计算机的管理.在谱写shell script的时候,需要注意以下问题: 1. 指令的执行是从上而下. 从左而右的分析与执行: 2. ...

  8. javascript入门 之 ztree(三 简单json数据)

    <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - Standard Data </TITLE& ...

  9. PTA 6-1 单链表逆转

    本题是一个非常经典的题目:单链表逆转. 这是链表结点的定义: typedef struct Node *PtrToNode; struct Node { ElementType Data; /* 存储 ...

  10. Git应用详解第六讲:Git协作与Git pull常见问题

    前言 前情提要:Git应用详解第五讲:远程仓库Github与Git图形化界面 git除了可以很好地管理个人项目外,最大的一个用处就是实现团队协作开发.况且,linus大神开发git的初衷就是为了维护L ...