图片的赖加载(lazyLoad)

懒加载的意义（在线demo预览）

尽管很多公司的网页都有一些限制，比如页面的最大的图片大小不得大于50k,也有很多图片优化工具fis3、gulp等等，但是如果图片太多还是会影响页面的加载速度，快则几十秒慢则几十分钟，这样会导致用户流失。

图片的加载对页面的加载速度有很大影响！！所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验，即图片赖加载~

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片赖加载</title><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><!-- 启用webAPP全屏模式--><meta name="apple-mobile-web-app-capable" content="yes"><!-- 隐藏状态栏或者设置状态栏的颜色--><meta name="apple-mobile-web-app-status-bar-style" content="black"><!-- 忽略数字自动识别为电话号码--><meta name="format-detection" content="telephone=no"><!--控制缓存的失效日期 --><meta http-equiv="Expires" content="-1"><!-- 禁止转码--><meta http-equiv="Cache-Control" content="no-cache"><!-- 禁止缓存访问页面--><meta http-equiv="Pragma" content="no-cache"><meta name="applicable-device" content="mobile"><!-- 页面关键词--><meta content="" name="keywords"><meta name="description" content=""><link rel="stylesheet" href="css/img_lazy.css">
</head>
<body><div class="main"><img src="" data-src="data:images/1.jpg" alt=""><img src="" data-src="data:images/2.jpg" alt=""><img src="" data-src="data:images/3.jpg" alt=""><img src="" data-src="data:images/4.jpg" alt=""><img src="" data-src="data:images/5.jpg" alt=""><img src="" data-src="data:images/6.jpg" alt=""><img src="" data-src="data:images/7.jpg" alt=""><img src="" data-src="data:images/8.jpg" alt=""></div>
<!--图片赖加载的JS--><script src="js/imgLazyLoad.js"></script>
</body>
</html>

*{margin: 0;padding: 0;box-sizing: border-box;list-style: none;border: 0;outline: 0;
}
.main{max-width: 640px;width: 100%;margin: 0 auto;
}
img{display: block;width: 100%;height: 640px;
}

/*** Created by Administrator on 2016/11/28.*/
!function(){var imgs = document.getElementsByTagName("img");var num = imgs.length;var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历lazyload(); //页面载入完毕加载可是区域内的图片window.onscroll = lazyload;function lazyload() { //监听页面滚动事件var seeHeight = document.documentElement.clientHeight; //可见区域高度var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度for (var i = n; i < num; i++) {if (imgs[i].offsetTop < seeHeight + scrollTop) {if (imgs[i].getAttribute("src") == "") {imgs[i].src = imgs[i].getAttribute("data-src");}n = i + 1;}}}
}();

转载于:https://www.cnblogs.com/-walker/p/6108866.html

图片的赖加载(lazyLoad)相关推荐

前端如何实现图片懒加载(lazyload) 提高用户体验
定义图片懒加载又称图片延时加载.惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力. 惰性加载是程序人性化的一种体现,提高用户体验,防 ...
移动端图片居多，加载过慢，使用延迟加载|懒加载（ lazyload.js）
文章目录[隐藏] Lazy Load 插件原理开始使用 lazyload.js lazyload.js 高级使用方法: 更周全的做法提前加载自定义触发事件自定义显示效果把图像插入某个容器加 ...
图片懒加载——lazyload
vue-lazyload - npm 上面链接为官方指导 1.安装vue2所兼容的版本 npm i vue-lazyload 2.在main.js中引入插件和图片 // 引入懒加载插件,引入图片 im ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
教你实现图片的惰性加载
图片惰性加载 DEMO 地址 -> 图片惰性加载(放在了 Github 上,所以可能会慢,最好用 chrome) 关于惰性加载在讲图片的惰性加载前,我们先来聊聊惰性加载.惰性加载又称为延迟加载 ...
网页从其他服务器加载图片,实现网页图片的异步加载
如题. 最近在进行开发的项目中,有一个网页需要使用非常多的图片,那么必须对图片的加载做优化.使用流式加载图片的方法是绝对不行,对服务器的带宽将是非常大的考验,于是,我考虑使用图片的异步加载. 在网上寻 ...
性能优化——图片压缩、加载和格式选择
本文首发于政采云前端团队博客:性能优化--图片压缩.加载和格式选择 https://www.zoo.team/article/images-compress 前言相信大家都听说过 "258 ...
【JavaScript】图片的懒加载
[JavaScript]图片的懒加载文章目录 [JavaScript]图片的懒加载 1. 懒加载 2. 利用`scroll`事件利用`HTMLElement.offsetTop` 利用`Eleme ...
图片的懒加载是怎么实现的
图片的懒加载是怎么实现的为什么要使用懒加载? 对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB.当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载 ...

图片的赖加载(lazyLoad)

懒加载的意义（在线demo预览）

原理

图片的赖加载(lazyLoad)相关推荐

最新文章

热门文章