概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
原理：当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
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. C# 人脸比对服务，自带模型，离线部署
			
    软件说明 基于以下开源项目,做了再次封装 GitHub - ViewFaceCore/ViewFaceCore: C# 超简单的离线人脸识别库.( 基于 SeetaFace6 ) 可以一键开启服务:  ...
    
			
    2. 
						
  2. Oracle 章节编号排序
			
    测试代码 CREATE TABLE TEST (CH_CODE VARCHAR2(10)); INSERT INTO TEST (CH_CODE) VALUES ('1.1'); INSERT INT ...
    
			
    3. 
						
  3. BeanUtils.copyProperties() 详解
			
    BeanUtils.copyProperties会进行类型转换:BeanUtils.copyProperties方法简单来说就是将两个字段相同的对象进行属性值的复制. 如果 两个对象之间存在名称不相同 ...
    
			
    4. 
						
  4. KingabseES执行计划-分区剪枝(partition pruning)
			
    概述 分区修剪(Partition Pruning)是分区表性能的查询优化技术 .在分区修剪中,优化器分析SQL语句中的FROM和WHERE子句,以在构建分区访问列表时消除不需要的分区.此功能使数据库 ...
    
			
    5. 
						
  5. IDEA代码缩略图插件CodeGlance
			
    打开IDEA设置Settings,选择Plugins,搜索CodeGlance. 点击Install,安装完成后重启即可. 效果如下:
    
			
    6. 
						
  6. 正则表达式环视匹配(?=pattern)、(?!pattern)、(?<=pattern)、(?<!pattern)怎么用
			
    今天在处理数据的时候遇到一个,需要用正则表达式匹配不包含某字符的字符串的问题,用到否定匹配,现总结如下: 一个正则小知识 ↓ []:表示范围,匹配其中任何一个 {}:表示重复匹配多次. ():表示分组 ...
    
			
    7. 
						
  7. 【已解决】Python使用sql语句模糊查询报错：python中TypeError: not enough arguments for format string
			
    2021-03-26-19:54:13 今天下午对世界疫情详情数据库进行模糊查询. 首先要明确一点:使用模糊查询就会用到WHERE语句中的LIKE语句,主要说一下在使用 % 的时候要注意的点: 在Py ...
    
			
    8. 
						
  8. 【已解决】解决Python打开文件---路径报错问题（SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape）
			
    原因分析: 在windows系统当中读取文件路径可以使用\,但是在python字符串中\有转义的含义, 如\t可代表TAB,\n代表换行, 所以我们需要采取一些方式使得\不被解读为转义字符.目前有3个 ...
    
			
    9. 
						
  9. SQL Server表分区-水平分区3
			
    目录 一.常用分区步骤 1.创建文件组 2.创建数据文件到文件组里面 3.使用图形界面向导创建分区表(不推荐) 3.使用T-SQL构建分区函数与分区方案(推荐) [3.1]建表时构造 [3.2]已有表 ...
    
			
    10. 
						
  10. 并发框架 LMAX Disruptor
			
    Introduction   Michael Barker edited this page on 2 Mar 2015 · 8 revisions The best way to understan ...
    
			
    11.