概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
原理：当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
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. 【教程】深入探究 JS代码混淆与加密技术
			
    引言 在网络世界中,保护代码安全是至关重要的一环.JS代码混淆与加密技术则成为了开发者们常用的手段之一.本文将深入探讨混淆和加密的概念,以及其实现原理和应用方法,帮助读者更好地了解并运用这些技术. 概 ...
    
			
    2. 
						
  2. MacOS安装 JDK 及动态切换版本
			
    MacOS安装 JDK 及动态切换版本 JDK下载  我自己使用的是Mac m2系列.无所谓用的哪一种开源的OPEN JD,按需下载,我下载了8,11,17三个版本. 安装完成后,终端输入 java  ...
    
			
    3. 
						
  3. 《.NET内存管理宝典》 售后服务系列文(2) - WinDbg命令.cmdtree
			
    此文是<.NET内存管理宝典   提高代码质量.性能和可扩展性>(英文名<Pro .NET Memory Management: For Better Code, Performan ...
    
			
    4. 
						
  4. base64格式上传图片后台写入
			
    前台 var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){//回调 } 后台  ...
    
			
    5. 
						
  5. KingbaseES数据库安装PostGIS扩展GEOSUnaryunionPrec错误
			
    一.问题现象: KingbaseES V008R006C007B0012数据库集群安装PostGIS扩展插件报错. create extension postgis; ERROR: could not ...
    
			
    6. 
						
  6. KingabseES 表空间限额子句(QUOTA Clause)
			
    概述 在Oracle数据库中,DBA权限用户,可以为其他用户,创建对象,即使该用户没有任何权限.当DBA用户在该用户的表,插入数据时,提示 超出表空间的空间限额 .这就需要设置该用户的表空间的空间限额 ...
    
			
    7. 
						
  7. Spark技术生态
			
    Spark的技术生态 Spark的技术生态包含了各种丰富的组件,而不同的组件提供了不同功能,以适应不同场景. Spark core spark core包含Spark的基本功能,定义了RDD的API以 ...
    
			
    8. 
						
  8. RedisTemplate 的简单使用
			
    redisTemplate.opsForValue() 方法可以获得一个 Redis String 的操作类,通过该类可以执行一系列字符串类型数据的操作,例如获取.设置.删除数据等. // 示例 1: ...
    
			
    9. 
						
  9. #Tarjan，SPFA#洛谷 3627 [APIO2009] 抢掠计划
			
    题目 分析 首先重复走,钱只会计算一次,而且与路程长度无关,考虑有向图缩点,然后跑最长路,这里吧边权取反跑最短路,然后在酒吧结束也就是求\(-dis[col_x]\)的最大值,\(col_x\)也就是 ...
    
			
    10. 
						
  10. OpenHarmony轻量设备Hi3861芯片开发板启动流程分析
			
    引言 OpenHarmony作为一款万物互联的操作系统,覆盖了从嵌入式实时物联网操作系统到移动操作系统的全覆盖,其中内核包括LiteOS-M,LiteOS-A和Linux.LiteOS-M内核是面向I ...
    
			
    11.