概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
原理：当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
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. FFmpeg开发笔记（七）欧拉系统编译安装FFmpeg
			
    FFmpeg支持Linux.macOS.Windows.Android等操作系统,其中Linux系列包括Ubuntu.Debian.Mint.CentOS.RHEL.Fedora等分支.FFmpeg官 ...
    
			
    2. 
						
  2. java DES 加密和解密
			
    代码如下 import javax.crypto.Cipher; import javax.crypto.SecretKeyFactory; import javax.crypto.spec.DESK ...
    
			
    3. 
						
  3. Python - inspect 模块的简单使用
			
    Python中的inspect模块解析 Python的inspect模块是一个强大的内省工具,允许开发者检查(inspect)活动对象和源代码.它提供了一系列函数,用于获取信息关于正在运行的程序和调用 ...
    
			
    4. 
						
  4. KingbaseES中查询对象大小的SQL及函数区别
			
    --查看所有数据库大小 select sys_database.datname, sys_size_pretty(sys_database_size(sys_database.datname)) AS ...
    
			
    5. 
						
  5. KingbaseES V8R6集群运维案例之---repmgrd进程启动无法访问共享内存
			
    案例说明: KingbaseES V8R6集群在启动repmgrd进程时,出现'unable to write to shared memory'故障,导致repmgrd进程启动终止. 适用版本: K ...
    
			
    6. 
						
  6. archlinux xfce禁用Alt+F打开终端文件菜单
			
    参照:https://superuser.com/questions/456024/how-to-disable-alt-f-shortcut-binding-from-file-menu-acces ...
    
			
    7. 
						
  7. #后缀数组,单调队列#洛谷 2852 [USACO06DEC]Milk Patterns G
			
    题目 给定一个长度为\(n\)的字符串,求出现至少\(k\)次的最长子串长度 分析 由于后缀排序后的LCP才是最长的,既然要求至少\(k\)次, 实际上也就是维护长度为\(k\)的height数组最小 ...
    
			
    8. 
						
  8. 深度剖析 Spring 框架在 Java 应用开发中的优势与应用
			
    Spring 是用于企业 Java 应用程序开发的最流行的应用程序开发框架.全球数百万开发人员使用 Spring Framework 创建高性能.易于测试和可重用的代码.Spring Framewor ...
    
			
    9. 
						
  9. openGauss数据与PostgreSQL的差异对比
			
    openGauss 数据与 PostgreSQL 的差异对比 前言 openGauss 数据库已经发布 2.0.1 版本了,中启乘数科技是一家专业的专注于极致性能的数据库服务提供商,所以也关注 ope ...
    
			
    10. 
						
  10. HDC2021技术分论坛：分布式软时钟有多重要？
			
    作者:lishijun,HarmonyOS解决方案首席技术专家&软总线首席架构师 分布式软总线是HarmonyOS的关键根技术之一,也是众多开发者们非常关注的一项技术.通过分布式软总线,可以将 ...
    
			
    11.