懒加载工作原理

1.1-懒加载介绍（以图片懒加载为例）

1.为什么要有懒加载技术

（1）img标签特点：不管图片隐藏还是显示有src属性都会去加载
- 例如电商类网站，一个页面有几百张图片。有时候假设用户不滚动，也会加载图片资源，此时非常损耗网页性能
（2）那么如果页面上有太多的图片而且有些图片不在可视窗口内如果加载了会影响页面的渲染页面时间。
- 判断网页是否使用图片懒加载技术：滚动网页的时候，图片会动态加载（一般会有一个渐变动画，例如京东）

2.如何实现懒加载技术

核心原理：延迟加载：当图片进入可视区域内容的时候才去加载
实现思路
- 1.将图片真实资源放入一个自定义属性中
  - 自定义属性作用：存储图片路径，此时图片不会加载
- 2.监听页面滚动条事件
- 3.判断图片是否进入页面可视区域
- 4.取出图片的自定义属性，赋值给图片的src属性（此时真正加载图片资源）
示例代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;width: 1000px;margin: 0 auto;}ul li {width: 230px;height: 230px;float: left;margin-right: 20px;margin-bottom: 20px;}ul li.last {margin-right: 0;}ul li img {width: 100%;height: 100%;display: block;opacity: 0;/* 过渡动画 */transition: all 5s linear;}</style>
</head><body><!-- 假设上面的内容高度1000px --><div style="height: 1000px;;background-color: rgba(200, 111, 111, 0.5)"></div><ul id="ul1"><li><img data-src="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg" alt=""></li><li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li><li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li><li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li></ul><script>/* 懒加载工作原理 *///0. 将图片的资源放入自定义属性中（例如data-src）//1.监听页面滚动条事件window.onscroll = function(e){console.log(document.scrollTop + document.clientHeight);//2.如果图片进入可视区域（假如400px）,则取出自定义属性，赋值给src属性（真正加载）//ul是否进入可视区域 ： 滚动条距离 + 页面可视区域高度 > 盒子高度if(document.documentElement.scrollTop + document.documentElement.clientHeight > 1000){var imgList = document.querySelectorAll('li>img');for(var i = 0;i<imgList.length;i++){imgList[i].style.opacity = 1;//过渡动画imgList[i].src = imgList[i].getAttribute('data-src');//过渡动画};}};</script>
</body></html>

网页性能优化02-懒加载工作原理相关推荐

前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
图片懒加载的原理和实现
一,前置知识 1,为什么要图片懒加载懒加载是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不是一次性加载所有图片,当需要显示时,再发送图片请求,避免打开网页时加载过多资 ...
img 的 alt 与 title 的异同，还有实现图片懒加载的原理
异同 alt是图片加载失败的时候,显示在网页上的替代文字:title是鼠标放在图片上显示的提示文字,title是对图片的描述与进一步说明. 这些都是表面上的区别,alt是img的必要属性,而title ...
图片懒加载的原理--三种方法实现
1. 图片懒加载的背景类似于大型的淘宝商城.京东等网页,设计大量的商品图片信息,如果我们使页面包含的所有图片一次性加载完成,那用户体验很差. 目前流行的做法是滚动动态加载,也就是懒加载,显示在屏幕之 ...
【前端】图片懒加载的原理和三种实现方式
一. 图片懒加载的目的大型网站如常用的淘宝,京东等页面,需要展示大量的商品图片信息,如果打开网页时让所有图片一次性加载完成,需要处理很多次网络请求,等待加载时间比较长,用户体验感很差. 有一种常用的 ...
ajax预加载html seo,前端性能优化 — JS预加载和懒加载
JS预加载需求:有时我们需要实现例如快速快速切换页面.图片之类的功能时,能尽快的加载出我们所需的图片会极大提升用户体验,这时用预加载将图片先缓存到浏览器,用户使用需显示图片时无疑会顺畅很多. 核心: ...
页面优化之懒加载与预加载
1.前言 PC端网速较快,现在普通都是百兆宽带,那么折算一下就是10M/s的下载速度,基本上资源如果在10M以内的话加载还是比较快的. 但是移动端就不行了.移动端需要消耗巨额的流量,所以尽量减少移动端 ...

网页性能优化02-懒加载工作原理

懒加载工作原理

1.1-懒加载介绍（以图片懒加载为例）

1.为什么要有懒加载技术

2.如何实现懒加载技术

网页性能优化02-懒加载工作原理相关推荐

最新文章

热门文章