按需加载图片(图片懒加载)
前言
按需要加载图片,这是一个非常实用的功能,不仅可以提高网站的性能,还可以为你节省流量。对于用虚拟主机的朋友来说,如果你的网站是一个图片网站或者图片比较多的网站,那么图片懒加载功能真不能少。
原理
实现图片懒加载的原理也非常地简单,默认情况下不给图片 scr 属性赋值。当满足一定的条件时才把图片地址取出来赋值给 src 属性。一般地,这上为了让网站页面有更好的用户体验,我们都会预先给所有的图片都设置一张默认的图片,比如一个像素的图片或者其它任意一张图片(只要你喜欢)。
实践代码
我们还是先来看看这个 Demo:http://yunkus.com/demo/load-images-on-demand/
例子中用了一个谈入的效果(CSS 3),如果你想用更多的效果,你可以下载一下 animate.css 库,尝试不同效果展示。在这里就不作过多的讲解,至于 animate.css 库的用法你可以参考这里:
Animate.css 使用教程(一个强大的 CSS3 动画库)。
CSS 样式
.lazy-img-box {
margin: 0 auto;
width: 430px;
overflow: hidden
}
.lazy-img-box li {
list-style: none;
float: left;
width: 400px;
height: 200px;
margin-right: 12px;
margin-bottom: 12px;
}
.lazy-img-box li img {
width: 400px;
height: 200px;
display: block;
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
HTML 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按需加载图片(图片懒加载)-云库网</title>
<meta name="description" content="按需加载图片不仅提高网站性能,还可以为你省了不少流量!" />
<meta name="keywords" content="JavaScript教程,按需加载图片,图片懒加载" />
<link rel="stylesheet" href="./index.css">
</head>
<body>
<ul class="lazy-img-box">
<li><img _src="http://yunkus.com/demo/lib/images/demo-1.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-2.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-3.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-4.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-5.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-6.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-7.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-8.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-9.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-1.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-2.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-3.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-4.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-5.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-6.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-7.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-8.jpg" src="./images/loading.gif" alt=""></li>
<li><img _src="http://yunkus.com/demo/lib/images/demo-9.jpg" src="./images/loading.gif" alt=""></li>
</ul>
<script src="./index.js"></script>
</body>
</html>
JavaScript 代码
window.onload = function () {
var lazyImg = document.getElementsByTagName("img");
var lazyImgLen = lazyImg.length;
var lazyImgArray = [];
var winowBroswerHeight = document.documentElement.clientHeight;
// 初始第一屏图片
loadImg();
// 滚动时执行加载图片的方法
window.onscroll = loadImg;
// 按需加载图片
function loadImg() {
for (var i = 0; i < lazyImgLen; i++) {
var getTD = getTopDistance(lazyImg[i]);
var getST = getScrollTop();
if (!lazyImg[i].loaded && getST < getTD && getTD < (getST + winowBroswerHeight)) {
lazyImg[i].src = lazyImg[i].getAttribute("_src");
lazyImg[i].classList.add("animated", "fadeIn");
lazyImg[i].loaded = true; // 标记为已加载
}
}
}
// 获取目录对象离 document 文档顶部的距离
function getTopDistance(obj) {
var TopDistance = 0;
while (obj) {
TopDistance += obj.offsetTop;
obj = obj.offsetParent;
}
return TopDistance;
}
// 获取滚动条的滚动距离
function getScrollTop() {
return document.documentElement.scrollTop || document.body.scrollTop;
}
}
不管滚动条处于什么位置,只要你一刷新,就只会加载处于屏幕里的图片。除此之处不管是屏幕上方的图片,还是屏幕下方的图片只要还没进入屏幕区的都不会被加载。这样的处理方式理论上是比较优的,但是在实践的应用中,却不一定能发展出原有的作用。试想一下,不管你是通过地址直接访问,还是通过搜索引擎进入一个页面,一般情况下都会从页面的顶部内容开始显示,如果你有洁癖想让代码更简单,那么 loadImg() 方法就可以更改成如下代码:
function loadImg() {
for (var i = 0; i < lazyImgLen; i++) {
var getTD = getTopDistance(lazyImg[i]);
var getST = getScrollTop();
if (!lazyImg[i].loaded && getTD < (getST + winowBroswerHeight)) {
lazyImg[i].src = lazyImg[i].getAttribute("_src");
lazyImg[i].classList.add("animated", "fadeIn");
lazyImg[i].loaded = true; // 标记为已加载
}
}
}
其实也没什么变的,只是 if 判断条件少了一个:
getST < getTD
不过也有例外,比如:从列表页中点了评论时,极有可能是跳到详情页后直接跳到评论区,这种情况也很常见,此时就不需要更改代码以达到最优。
这里还有个小问题,关于滚动监听事件的,像上面那样写 window.onscroll = function(){} 一个页面只能用一个,如果有其它地主也用到这个滚动监听事件的话,那么就会只有一个起作用。在这里可以用事件绑定来解决,具体的方法可以查阅这里:常用的 JavaScript 函数封装。
转自:http://yunkus.com/load-images-on-demand/
按需加载图片(图片懒加载)相关推荐
- 图片的懒加载和预加载?
一.写在前面 图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载 图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
- 如何使用echo.js实现图片的懒加载(整理)
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- 【JavaScript】图片的懒加载
[JavaScript]图片的懒加载 文章目录 [JavaScript]图片的懒加载 1. 懒加载 2. 利用`scroll`事件 利用`HTMLElement.offsetTop` 利用`Eleme ...
- 图片的懒加载是怎么实现的
图片的懒加载是怎么实现的 为什么要使用懒加载? 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载 ...
- android预加载布局,Android 懒加载优化
目录介绍 1.什么是懒加载 1.1 什么是预加载 1.2 懒加载介绍 1.3 懒加载概括 2.实际应用中有哪些懒加载案例 2.1 ViewPager+Fragment组合 2.2 分析源码 3.Vie ...
- el-select下拉加载(实现懒加载)自定义loadmore事件
el-select下拉加载(实现懒加载)自定义loadmore事件 使用场景:下拉框远程搜索数据量较大,导致dom渲染很慢,所以远程搜索要采用分页的形式,故自定义事件,实现滚动加载,具体如下: 1.自 ...
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- 图片的懒加载与预加载
懒加载 懒加载:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力. 懒加载的实现原理是:将页面上图 ...
- ios加载本地html懒加载图片方案,IOS开发中加载大量网络图片优化方法
IOS开发中加载大量网络图片如何优化 1.概述 在IOS下通过URL读一张网络图片并不像其他编程语言那样可以直接把图片路径放到图片路径的位置就ok,而是需要我们通过一段类似流的方式去加载网络图片,接着 ...
- 图片懒加载以及数据懒加载
当一个单页面应用加载发送的请求很多时,页面可能会出来的很慢影响用户体验,此时我们就可以对项目进行优化,使用数据懒加载以及图片懒加载优化网络性能.懒加载的原理是当组件对象或者Dom对象出现在可视区域的时 ...
最新文章
- NSA释出逆向工程工具GHIDRA针对恶意软件逆向分析
- 结构体的嵌套 自身嵌套 相互嵌套
- s:iterator输出key为一个对象,value为一个List集合的Map
- 常用的函数式接口_Consumer接口练习_字符串拼接输出
- HTML语言利用函数求中位数,javascript-使用OnClick()计算用户放入HTML表中的数字的平均值...
- greenplum配置高可用_Greenplum 的高可用是怎么做到的?
- 是什么故障码_大众途观报P2187、P0101故障,差点就换发动机了
- 企业数据化应用的第一步,你需要报表管理平台
- C++实现自动发邮件代码,这个是用网易邮箱的。
- 微型计算机的字节取决于什么的宽度,计算机的字长取决于什么?
- Postgres-XL数据库集群在RedHat/Fedora/Oracle/CentOS平台上的搭建
- JDK、JRE、javac和JVM的关系
- linux jvm启动过程,Linux操作系统启动过程详解
- copy 和 deepcopy的区别
- 王者荣耀用java_怎样用Java的方式打开王者荣耀
- 基于java的教学评价系统的设计与实现
- SPSS Statistics 分位数回归 翻译文档
- 学习乔布斯的成功方法
- eclipse背景设置什么颜色缓解眼睛疲劳之一
- JavaScript中栈内存与堆内存分别是什么?
热门文章
- nginx稳定版本_Nginx简介
- 计算机中文无敌版,奥特曼格斗进化3中文无敌版电脑版
- 保存图像_设计干货知识:SVG vs PNG vs JPG|图像格式的优缺点
- 的boc调制matlab程序_Matlab仿真基础数字全息
- java记录每个元素出现几次_哪位师傅帮用Java我计算出数组中每个元素出现的次数...
- php+php-fom+nginx配置参数调优详解
- linux环境下监控日志的变化命令 tail -f
- Android模块化面向接口编程,讲的明明白白!
- python【数据结构与算法】红黑树概念辨析
- 【深度学习】快照集成等网络训练优化算法系列