图片懒加载是怎么实现的?如何实现图片懒加载?

1、什么是懒加载

将图片src先赋值为一张默认图片，当用户滚动滚动条到可视区域图片的时候，再去加载后续真正的图片

2、为什么要引入懒加载

懒加载（LazyLoad）是前端优化的一种有效方式，可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）

3、加载实现的原理

先将img标签中的src链接设置为空，将真正的图片链接放在自定义属性（data-src），当js监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到src中，达到懒加载的效果。

4、实现思路

如果滚动的大小和屏幕高度之和大于元素到顶部的距离，设置一个定时器，制造懒加载的延迟加载的效果，也就是说，当我们滑动滚动条，看见图片的时候，就让它加载出来

5、懒加载的实现（jquery）

   <img src="/image/8.jpg" data-src="/image/1.png" alt=""><img src="/image/8.jpg" data-src="/image/2.png" alt=""><img src="/image/8.jpg" data-src="/image/3.png" alt=""><img src="/image/8.jpg" data-src="/image/4.png" alt=""><img src="/image/8.jpg" data-src="/image/5.png" alt=""><img src="/image/8.jpg" data-src="/image/6.png" alt=""><img src="/image/8.jpg" data-src="/image/7.png" alt="">

 $(window).scroll(handleScroll)function handleScroll() {let imgs = $('img[data-src]');console.log(imgs)//获取滚动的值let bodyScrollHeight = document.body.scrollTop || document.documentElement.scrollTopconsole.log(bodyScrollHeight)//获取可视高度(屏幕高度)let windowHeight = window.innerHeightconsole.log(windowHeight)for (let i = 0; i < imgs.length; i++) {// 获取元素到浏览器顶部的距离let imgHeight = $(imgs[i]).offset().top// console.log(imgHeight)// 如果滚动的大小和屏幕高度之和大于元素到顶部的距离if (imgHeight < windowHeight + bodyScrollHeight) {//setTimeout:设置一个定时器，制造懒加载的延迟加载的效果setTimeout(function () {$(imgs).eq(i).attr('src', $(imgs).eq(i).attr('data-src'))}, 1000)}}}handleScroll()

原生

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Lazyload</title><style>img {display: block;margin-bottom: 50px;height: 200px;}</style>
</head>
<body><img src="data:images/loading.gif" data-src="data:images/1.png"><img src="data:images/loading.gif" data-src="data:images/2.png"><img src="data:images/loading.gif" data-src="data:images/3.png"><img src="data:images/loading.gif" data-src="data:images/4.png"><img src="data:images/loading.gif" data-src="data:images/5.png"><img src="data:images/loading.gif" data-src="data:images/6.png"><img src="data:images/loading.gif" data-src="data:images/7.png"><img src="data:images/loading.gif" data-src="data:images/8.png"><img src="data:images/loading.gif" data-src="data:images/9.png"><img src="data:images/loading.gif" data-src="data:images/10.png"><img src="data:images/loading.gif" data-src="data:images/11.png"><img src="data:images/loading.gif" data-src="data:images/12.png"><script>function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，var timeout = null,//进行去抖处理startTime = new Date();return function() {var curTime = new Date();　　　　clearTimeout(timeout);if(curTime - startTime >= atleast) {fn();startTime = curTime;}else {timeout = setTimeout(fn, delay);}}}function lazyload() {var images = document.getElementsByTagName('img');var len    = images.length;var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历        return function() {var seeHeight = document.documentElement.clientHeight;var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;for(var i = n; i < len; i++) {if(images[i].offsetTop < seeHeight + scrollTop) {if(images[i].getAttribute('src') === 'images/loading.gif') {images[i].src = images[i].getAttribute('data-src');}n = n + 1;}}}}var loadImages = lazyload();loadImages();          //初始化首页的页面图片window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数</script>
</body>
</html>

参考链接：
https://www.cnblogs.com/qing-5/p/11343125.html
https://blog.csdn.net/lqlq54321/article/details/106606563/

图片懒加载是怎么实现的?如何实现图片懒加载?相关推荐

服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
懒加载、瀑布流和LightBox实现图片搜索效果
开始做一个小项目,算是对js和jQuery的一次练习吧. 图片资源来自这个网站(上面有很多高清图片关键还是免费下载的): https://unsplash.com/ 项目具体效果可以点这里: htt ...
layui树形懒加载_layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 使用示例如下: 展开全部展开一层折叠全部折叠一层 layui.config({ base: '/uui/treetable-lay/module/' } ...
从零开始实现图片加载特效之黑白照片、倒影图片、图片蒙版
尊重他人的劳动成果,转载请标明出处:http://blog.csdn.net/gengqiquan/article/details/53168797, 本文出自:[gengqiquan的博客] 之前有 ...
ios 图片加载内存尺寸_iOS内存分析上-图片加载内存分析
简介对于大多数App来说,内存占用主要就是图片.本文将从实用的角度分析,iOS图片的内存占用.测量.优化等. iOS内存-有什么影响在移动操作系统设备中,是不能像PC一样进行内存swap的,而随着 ...
【MFC】动态加载Picture Control控件中的图片
[MFC]动态加载Picture Control控件中的图片前言方法1:CBrush 方法2:SetBitmap 参考链接方法3:重写MyPictureControl 前言在MFC窗体中,我们 ...
c# 实现网页加载后将页面截取为长图片
背景最近再做一个需求,需要对网页生成预览图,如下图但是网页千千万,总不能一个个打开,截图吧:于是想着能不能使用代码来实现网页的截图.其实要实现c#教程这个功能,无非就是要么实现一个仿真浏览器,要么 ...
python镜像加载_少为人知的Python图片处理，赶紧收藏起来
想必大多数的人都知道Python可以做什么?无论是外行人都多多少少在生活中听到过和接触过,Python实现自动化办公,Python数据分析,Python网络爬虫.但是对于我来说Python可远远不止这 ...
htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
cocosCreator 精灵图片加载（一键还原大小+动态修改图片）
问题:在cocosCreator中没找到对图片重置大小的按钮(在cocos2d-x中,图片可以通过重置大小来快速还原图片的原本大小) 所以在cocosCreator中替换资源的时候,图片资源和原来不同 ...