懒加载

日期:2019-11-22编辑作者:Web前端

作为网页内容的一部分,图像和视频通常要消耗很多资源加载。要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了。但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手。幸运的是,我们有懒加载这个绝招,它可以帮助我们减少加载时间和降低负载,而不在内容上偷工减料。

1.什么是懒加载?

懒加载也就是延迟加载。
当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为同一张图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。

demo:

//所有img元素的src属性值是同一个图片地址,自定义属性data-src里存储的是真正需要加载的图面地址,当图片出现在浏览器的可视区域内时,再把data-src的属性值赋值给对应的img元素的src属性
<ul class="warp">

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

<li><a href="#">![](http://www.tongyizhangtupian.jpg)</a></li>

</ul>

认识懒加载

2.为什么要使用懒加载?

很多页面,内容很丰富,页面很长,图片较多。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要是页面载入就一次性加载完毕,会花费很多不必要的时间。

什么是懒加载?

懒加载是一种在页面加载时延迟加载一些非关键资源的技术,换句话说就是按需加载。

我们之前看到的懒加载一般是这样的形式:

  • 浏览一个网页,准备往下拖动滚动条
  • 拖动一个占位图片到视窗
  • 占位图片被瞬间替换成最终的图片

3.懒加载的原理是什么?

页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。
懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的自定义属性“data-src”(这个名字起个自己认识好记的就行)里,要用的时候就取出来,再设置。

为什么使用懒加载而不直接加载?

  • 浪费流量。在不计流量收费的网络,这可能不重要;在按流量收费的网络中,毫无疑问,一次性加载大量图片就是在浪费用户的钱。
  • 消耗额外的电量和其他的系统资源,并且延长了浏览器解析的时间。因为媒体资源在被下载完成后,浏览器必须对它进行解码,然后渲染在视窗上,这些操作都需要一定的时间。

懒加载图片和视频,可以减少页面加载的时间、页面的大小和降低系统资源的占用,这些对于性能都有显著地提升。总体来讲,就是改善用户体验,增强页面性能。

 

4.懒加载的实现步骤?

首先我们来看一张图:

图片 1

Paste_Image.png

滚动滑动的垂直距离:
var scrollTop = $(window).scrollTop();
窗口的高度:
var windowHeight = $(window).height();
元素到页面顶部的高度:
var offsetTop = $img.offset().top;

由图片可知:当offsetTop < scrollTop + windowHeight && offsetTop > scrollTop ,这时图片元素才在我们的可视窗口

懒加载步骤:

1)首先,不要将图片地址放到src属性中,而是放到自定义属性data-src中。

2)页面加载完成后,根据scrollTop判断图片是否在用户的视野内,如果在,则将data-original属性中的值取出存放到src属性中。

3)在滚动事件中重复判断图片是否进入视野,如果进入,则将data-src属性中的值取出存放到src属性中。

图解

通过下图所示(绿色为页面范围,红色为窗口范围,蓝色为待显示元素)。 $(window).scrollTop() 为 页面顶部 到 窗口顶部的高度。 $(window).height() 为 窗口的高度。$node.offset().top 为页面顶部到待显示元素的高度。即我们可以知道如何判断一个元素,是否进入用户视野范围内,即

$node.offset().top <= $(window).height() + $(window).scrollTop()

条件满足的时候,这个元素就进入了我们的视野。

 

图片 2

5.懒加载的优点是什么?

页面加载速度快,减少内存占用,减轻了服务器的压力,节约了流量,用户体验好
懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

本文由www.129028.com金沙发布于Web前端,转载请注明出处:懒加载

关键词:

building for production...Killed

semWrapper.class.php npm run build报错 page.php 解决方法 sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024 sudo /sbin/mkswap /var/swap.1 ...

详细>>

www.129028.com金沙HTML5初识Canvas

HTML5初识Canvas !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-e...

详细>>

v-www.129028.com金沙model和:model的区别

www.129028.com金沙,v-model是vue.js中内置的双向数据绑定指令,用于表单控件以外的标签是不起作用的(即只对表单控件标...

详细>>

一个跑马灯插件(【www.129028.com金沙】持续优化)

这是我写的一个粗略的跑马灯插件1.0,后面的版本将新增图片滚动的功能!! 使用方法: 一、HTML模板 div id="marquee...

详细>>