概念：对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。
原理：当图片元素的偏移高度<=设备高度+滚动条与顶部的距离,即
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. CMake使用Boost
			
    cmake_minimum_required(VERSION 2.8) set(Boost_INCLUDE_DIR /usr/local/src/boost_1_46_1) set(Boost_LIB ...
    
			
    2. 
						
  2. Oracle ORA-09925
			
    Error : 30: Read-only file system 造成这个问题的原因大多数是因为非正常关机后导致文件系统受损引起的,在系统重启之后,受损分区就会被Linux自动挂载为只读. 解决办法 ...
    
			
    3. 
						
  3. archlinux 格式化分区并创建文件系统后，分区的文件系统没有改变
			
    这就需要格式化分区并创建文件系统后 再执行partprobe应该就可以看到分区的文件系统改变了 partprobe partprobe命令用于通知操作系统重新读取分区表,以便识别新创建的分区或者删除的 ...
    
			
    4. 
						
  4. LiteOS-A内核中的procfs文件系统分析
			
    一. procfs介绍 procfs是类UNIX操作系统中进程文件系统(process file system)的缩写,主要用于通过内核访问进程信息和系统信息,以及可以修改内核参数改变系统行为.需要注 ...
    
			
    5. 
						
  5. C++ 智能指针和内存管理：使用指南和技巧
			
    C++是一门强大的编程语言,但是在内存管理方面却存在着一些问题.手动管理内存不仅费时费力,而且容易出错.因此,C++中引入了智能指针这一概念,以更好地管理内存. 什么是智能指针? 在C++中,内存的分 ...
    
			
    6. 
						
  6. HarmonyOS元服务开发实践：桌面卡片字典
			
     本文转载分享自华为开发者论坛<HarmonyOS元服务开发实践:桌面卡片字典>,作者:蛟龙腾飞   一.项目说明 1.DEMO创意为卡片字典. 2.不同卡片显示不同内容:微卡.小卡.中卡 ...
    
			
    7. 
						
  7. 3.1版本【HarmonyOS 第一课】正式上线！参与学习赢官方好礼>>
			
      [课程介绍] <HarmonyOS第一课>是跟随版本迭代不断推出的系列化课程,本期课程基于HarmonyOS 3.1版本的新技术和特性,每个课程单元里面都包含视频.Codelab.文章 ...
    
			
    8. 
						
  8. Excel 特殊分组汇总示例
			
    期望结果: 按照成绩划分区间段来分组时,定义好值的划分区间后,只需用 pseg 函数便可以将分数分好段,然后统计出各段人次即可. SPL 代码如下:   A B 1 =clipboard().impo ...
    
			
    9. 
						
  9. k8s 深入篇———— docker 镜像是什么[二]
			
    前言 简单介绍一下docker的镜像. 正文 前面讲到了容器的工作原理了(namespace 限制了时间, cgroup限制了资源),知道docker 历史的也知道,docker 之所以能够称为容器大 ...
    
			
    10. 
						
  10. 重新整理 .net core 实践篇————防跨站脚本攻击[四十]
			
    前言 简单整理一下跨站脚本攻击. 正文 攻击原理是这样子的: 这种攻击被攻击的面挺多的,比如说只要有一个可以让用户输入的注入脚本就都是一个问题. 给网站注入脚本 然后用户访问给网站注入的脚本 脚本里面 ...
    
			
    11.