码迷,mamicode.com
首页 > Web开发 > 详细

js图片延迟加载

时间:2016-12-20 01:31:42      阅读:165      评论:0      收藏:0      [点我收藏+]

标签:角度   技术   .com   代码   包括   加载   过程   html   css   

什么是图片延迟加载

也叫懒加载。

当页面有多屏的时候,页面中的图片比较多。

那么,在页面载入完毕的时候,并不会把所有的图片都加载进来。

而是当用户拖动滚动条的时候,图片要进入用户的视野了,才开始加载对应位置的图片。

有什么用?

主要是为了提升网站的性能,节省流量(网站和用户)。

如何实现

如果的开发的时候,实现的方式其实有很多相应的插件。

原生的js来实现。

我们就是站在学习的角度,使用原生的js来实现这个效果。

实现步骤:

搭建HTML结构

 技术分享

编写css样式

 技术分享

显示如下:

 技术分享

首先,就需要将src属性去掉,

 技术分享

其次,当滚动条滚动的过程中,如果img元素 要出现在视窗中的时候,就需要去加载对应的图片。

分析过程:

技术分享

clientWidth:元素可视部分的宽度,即width和padding之和,不包含边框和滚动条,也不包含任何可能的滚动区域。

clientHeight:元素可视部分的高度,及heigth和padding之和,不包括边框和滚动条,也不包含任何可能的滚动区域。

 技术分享

编写代码如下:

先看一张图片的效果:

 

 技术分享

使用循环,批量处理

技术分享

js图片延迟加载

标签:角度   技术   .com   代码   包括   加载   过程   html   css   

原文地址:http://www.cnblogs.com/itsnail/p/6201140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!