概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
原理：当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
img.offset().top <= window.height() + window.scrollTop();　
图片：



时，使用html5中的data-属性作为暂存器， 给图片的src赋值上自定义属性data-lazyload的真实路径：




<img src="loading.gif" data-lazyload="img.jpg"> 




直接上一个完整的demo吧




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>懒加载</title>

</head>

<body>

    <div class="img">

        <img src="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h" alt="">

        <img src="./img/th.png" data-lazyload="https://dpic3.tiankong.com/67/cn/QJ6226943363.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/zt/sg/QJ6235849453.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/ul/ac/QJ6479383109.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic2.tiankong.com/1z/kb/QJ6401246638.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/ut/zj/QJ6634256101.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic.tiankong.com/09/jh/QJ6635714192.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic3.tiankong.com/6k/i5/QJ6727412259.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic2.tiankong.com/av/fc/QJ6872601378.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic.tiankong.com/37/1u/QJ7100086664.jpg@!350h">

        <img src="./img/th.png" data-lazyload="https://dpic1.tiankong.com/jt/7l/QJ7100510973.jpg@!350h">

    </div>

</body>

</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

   //  第一次加载

   getImg()

    var clock; //  设置一个延时函数节流

    $(window).on('scroll', () => {

        if (clock) {

            //  如果拉动滚动条时，延时函数还未执行完，则清除

            clearTimeout(clock);

        }

        clock = setTimeout(() => {

            getImg();

        }, 2000)

    })

    function getImg() {

        // 返回没有data-isLoaded的img标签

        // [1,2,3].not(1) => 返回不含有1的数组 [2,3]

        $('.img img').not('[data-isLoading]').each((index,item) => {

            if(isShow(item)) loading(item);

        })

    }

    function isShow(img) {

        return $(img).offset().top <= $(window).height() + $(window).scrollTop()

    }

    function loading(img) {

        // 给图片的src赋值上自定义属性data-lazyload的真实路径：

        $(img).attr('src', $(img).attr('data-lazyload'));

        //  为已经加载的图片加一个标识，上面遍历图片的时候就会跳过已经加载了的图片

        $(img).attr('data-isLoaded', 1);

    }

</script>





　　
												


											
js实现懒加载原理的更多相关文章
	

    
						
  1. JS图片懒加载
		
    简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
    
		
    2. 
						
  2. 解析苹果的官方例子LazyTableImages实现图片懒加载原理
		
    解析苹果的官方例子LazyTableImages实现图片懒加载原理 首先在官网下载源码: https://developer.apple.com/library/ios/navigation/#sec ...
    
		
    3. 
						
  3. Node.js require 模块加载原理 All In One
		
    Node.js require 模块加载原理 All In One require 加载模块,搜索路径 "use strict"; /** * * @author xgqfrms  ...
    
		
    4. 
						
  4. js实现图片懒加载原理
		
    原理 图片懒加载是前端页面优化的一种方式,在页面中有很多图片的时候,图片加载就需要很多时间,很耗费服务器性能,不仅影响渲染速度还会浪费带宽,为了解决这个问题,提高用户体验,所以就出现了懒加载这种方式来 ...
    
		
    5. 
						
  5. WebPack之懒加载原理
		
    代码结构 main.js console.log("这是main页面"); import(/* webpackChunkName: "foo" */" ...
    
		
    6. 
						
  6. js 图片懒加载
		
    图片懒加载(图片出现在可视区域再加载) 兼容性:兼容目前流行的全部浏览器,包括:兼容到IE6) 使用方法: 引入相应的js文件<script src="js/lazy.js" ...
    
		
    7. 
						
  7. js图片懒加载（滚动加载）是否生效
		
    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
    
		
    8. 
						
  8. js学习之原生js实现懒加载
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
    
		
    9. 
						
  9. 使用jQuery实现图片懒加载原理
		
    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...
    
		
    10. 
						
  10. js图片懒加载（滚动加载）判断是否生效
		
    一.什么是懒加载? 对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载. 二.为什么使用懒加载? 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 理论性知识大家都有自 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 2024-03-27：用go语言，多维费用背包。 给你一个二进制字符串数组 strs 和两个整数 m 和 n， 请你找出并返回 strs 的最大子集的长度，该子集中 最多 有 m 个 0 和 n 个
			
    2024-03-27:用go语言,多维费用背包. 给你一个二进制字符串数组 strs 和两个整数 m 和 n, 请你找出并返回 strs 的最大子集的长度,该子集中 最多 有 m 个 0 和 n 个  ...
    
			
    2. 
						
  2. KingbaseES 中的xmin,xmax等系统字段说明
			
    在KingbaseES中,当我们创建一个数据表时,数据库会隐式增加几个系统字段.这些字段由系统进行维护,用户一般不会感知它们的存在. 例如,以下语句创建了一个简单的表: create table te ...
    
			
    3. 
						
  3. KingbaseES V8R6 运维案例 --ksql访问动态库问题
			
    KingbaseES V8R6数据库运维案例之---ksql访问动态库问题 案例说明: CentOS环境下,在安装和初始化数据库实例后,启动数据库服务,通过ksql连接访问时出现以下故障: 经检查,是 ...
    
			
    4. 
						
  4. DevSecOps 中的漏洞管理（上）
			
    DevSecOps意味着在DevOps交付管道把安全性包含进去.该模型尽可能早地将安全原则集成到软件开发生命周期的所有适用阶段中.下图展示了安全方面在DevOps后期阶段的集成,但DevSecOps安 ...
    
			
    5. 
						
  5. 学习Source Generators之IncrementalValueProvider
			
    前面我们使用了IIncrementalGenerator来生成代码,接下来我们来详细了解下IIncrementalGenerator的核心部分IncrementalValueProvider. 介绍  ...
    
			
    6. 
						
  6. WPF动画教程（PointAnimationUsingPath的使用）
			
    PointAnimationUsingPath的介绍 PointAnimationUsingPath 是 WPF 中的一个类,它用于创建一个动画,该动画会沿着指定的路径移动一个点. 关于 PointA ...
    
			
    7. 
						
  7. 6 HTML图片标签
			
    6 图片标签 在HTML中,图像由标签定义的,它可以用来加载图片到html网页中显示.网页开发过程中,有三种图片格式被广泛应用到web里,分别是 jpg.png.gif. img标签的属性: /* s ...
    
			
    8. 
						
  8. #网络流，树状数组#JZOJ 4020 Revolution with JZOJ 4018 Magic
			
    CF297E Mystic Carvings=JZOJ 4018 Magic JZOJ 4020 Revolution 题目 有一个\(n*m(n,m\leq 20)\)的网格图 这格子有收益当且仅当 ...
    
			
    9. 
						
  9. 一键部署openGauss2.0.1 CentOS 7.6
			
    一键部署 openGauss2.0.1[CentOS 7.6] 本文档目的是为了帮助高校学生提供基于 CentOS7.6 操作系统,实现 openGauss 数据库一键式安装的脚本. 该脚本执行成功后 ...
    
			
    10. 
						
  10. 抓包整理外篇——————https 抓包 [ 五]
			
    前言 简单介绍一下https 抓包. 正文 可能有人一开始的时候发现抓包都抓不到,原因也很简单,那是因为https 需要解密. 那么为什么https 不解密呢? 那是因为证书信任问题. 下面先介绍,上 ...
    
			
    11.