使用JS进行图片懒加载
2017-05-15 16:35
162 查看
本文原创，转载请注明出处
前几天修改了之前APP的一些功能，发现图片的加载太慢了，而且一个页面显示太多图片的话其他js什么的也都延迟了加载，造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务器限制的有下载速度，所以考虑到了图片的懒加载(这个思路也可以实现上拉加载)。
下面我只是简单实现了一下效果，抛砖引玉，想一次加载一个屏幕那么多图片的话也不难，需要的可以另外加入判断即可，这里就不再赘述：
2017-05-15 第一次编辑
2017-11-24 更新
看了一下之前写的这篇博客，发现有些地方写的比较马虎或者说瞎写，因为那个时候以为这样的需求已经足够用了，闲来无事看了下发现问题很大。已经更新，如果发现还有错误请留言。
CSS代码
HTML代码
JS代码
完整代码
前几天修改了之前APP的一些功能，发现图片的加载太慢了，而且一个页面显示太多图片的话其他js什么的也都延迟了加载，造成事件方法未加载、操作无效果,用户体验差。原因除了图片显示的有点多之外还有我们的服务器限制的有下载速度，所以考虑到了图片的懒加载(这个思路也可以实现上拉加载)。
下面我只是简单实现了一下效果，抛砖引玉，想一次加载一个屏幕那么多图片的话也不难，需要的可以另外加入判断即可，这里就不再赘述：
2017-05-15 第一次编辑
2017-11-24 更新
看了一下之前写的这篇博客，发现有些地方写的比较马虎或者说瞎写，因为那个时候以为这样的需求已经足够用了，闲来无事看了下发现问题很大。已经更新，如果发现还有错误请留言。
CSS代码
HTML代码
JS代码
完整代码
CSS代码
只是设置图片的一些样式：<style>
*{margin: 0;padding: 0;}
img{width: 50%;display: inline-block;border: 1px solid #ccc;float: left;}
</style>HTML代码
1.png是一个1*1px的透明图或者带有logo，这样加载快，测试效果的话无所谓，只要能区分开路径不一样就行，jpg 格式图是实际应该加载的图片路径，两个图显示的宽高要一致。data-url存放图片实际路径：<div id="div"> <div id="one"> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/3.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/4.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/5.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> </div> <div id="two"> <img class="img" data-url="img/6.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/7.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/8.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> </div> </div>
JS代码
原理：滚动至#two内容显示出来时，让#two内的图片路径改为实际路径：<script>
//首次进入触发判断
getList();
function getList(){
//第一次显示的图片列表高度
var contentHeight = document.getElementById('one').offsetHeight;
//设备可用高度
var availHeight = window.screen.availHeight;
//如果不滚动two直接被显示出来
if (contentHeight<availHeight){
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
//img.onload方法里如果不是自调用函数，x会为循环之后的最大值，而不是0，1，2...
img.onload = (function(e){
document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
})();
}
//遍历#two，然后替换路径
for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){
var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
})();
}
}else {
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
})();
}
}
}
//#two显示的次数 0是第一次显示
var twoShowTime = 0;
//滚动事件
window.onscroll = function(){
if (twoShowTime == 0){
scroll();
}
};
//滚动判断图片是否加载
function scroll() {
//#content的高度
var contentHeight = document.getElementById('one').offsetHeight;
//设备可用高度
var availHeight = window.screen.availHeight;
//滚动的高度
var scrollHeight = document.body.scrollTop;
//判断如果显示出来了#two
if (scrollHeight > contentHeight - availHeight) {
//遍历#two下的img，然后替换路径
for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) {
var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
//img.onload方法里如果不是自调用函数，x会为循环之后的最大值，而不是0，1，2...
img.onload = (function () {
document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
})();
}
twoShowTime = 1;
}
}
</script>完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
<title>图片懒加载</title>
</head>
<style>
*{margin: 0;padding: 0;}
img{width: 48%;height: 150px;display: inline;border: 1px solid #ccc;}
</style>
<body><div id="div"> <div id="one"> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/3.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/4.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/5.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/1.jpg" src="img/2.png" alt=""> </div> <div id="two"> <img class="img" data-url="img/6.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/7.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/8.jpg" src="img/2.png" alt=""> <img class="img" data-url="img/2.jpg" src="img/2.png" alt=""> </div> </div>
<script>
//首次进入触发判断
getList();
function getList(){
//第一次显示的图片列表高度
var contentHeight = document.getElementById('one').offsetHeight;
//设备可用高度
var availHeight = window.screen.availHeight;
//如果不滚动two直接被显示出来
if (contentHeight<availHeight){
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
})();
}
//遍历#two，然后替换路径
for(var x = 0;x < document.querySelectorAll('#two .img').length;x++){
var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
})();
}
}else {
//遍历#one下的img，然后替换路径
for(var x = 0;x < document.querySelectorAll('#one .img').length;x++){
var imgUrl = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function(e){
document.querySelectorAll('#one .img')[x].src = document.querySelectorAll('#one .img')[x].getAttribute('data-url');
})();
}
}
}
//#two显示的次数 0是第一次显示
var twoShowTime = 0;
//滚动事件
window.onscroll = function(){
if (twoShowTime == 0){
scroll();
}
};
//滚动判断图片是否加载
function scroll() {
//#content的高度
var contentHeight = document.getElementById('one').offsetHeight;
//设备可用高度
var availHeight = window.screen.availHeight;
//滚动的高度
var scrollHeight = document.body.scrollTop;
//判断如果显示出来了#two
if (scrollHeight > contentHeight - availHeight) {
//遍历#two下的img，然后替换路径
for (var x = 0; x < document.querySelectorAll('#two .img').length; x++) {
var imgUrl = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
var img = new Image();
img.src = imgUrl;
img.onload = (function () {
document.querySelectorAll('#two .img')[x].src = document.querySelectorAll('#two .img')[x].getAttribute('data-url');
})();
}
twoShowTime = 1;
}
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于在页面加载完后使用js修改图片高度进行手机屏幕适配的问题
- 图片未正常加载时使用onerror 来进行后续处理。
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- WebView加载完网页之后利用js进行网页刷新，解决webview显示图片适应所有的机型
- JQuery缓冲加载图片插件lazyload.js的使用方法
- 延迟加载图片插件LazyLoad.js的使用方法
- 按需加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- Android开发之搜芽项目的图片加载问题(使用Volley进行网络图片加载)
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- 使用JS上传图片进行预览
- js判断背景图片是否加载成功使用img的width实现
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 使用GirdView异步加载图片,并对图片进行颜色矩阵变化
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- java使用文件或字节数组方式加载图片，并修改图片后进行保存、输出等
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 延迟加载图片插件LazyLoad.js的使用方法
- 使用JS，使得加载页面之前显示GIF图片