如何实现图片的异步加载
2018-03-06 15:46
239 查看
1.概述
异步加载：也称为图片的预加载。利用js代码提前加载图片，用户需要时可以直接从本地缓存获取，但是会增加服务器前端的压力。这样做可以提高用户的体验，因为同步加载大图片的时候，图片会一层一层的显示处理，但是经过预加载后，直接显示出整张图片。但是在图片响应时间上优化不是那么明显。
2.基本形式
3.应用
利用预加载显示3张1980*1080的图片，正常加载的话会慢慢显示出来。而用预加载的话，等一会3张基本同时显示出来。
异步加载：也称为图片的预加载。利用js代码提前加载图片，用户需要时可以直接从本地缓存获取，但是会增加服务器前端的压力。这样做可以提高用户的体验，因为同步加载大图片的时候，图片会一层一层的显示处理，但是经过预加载后，直接显示出整张图片。但是在图片响应时间上优化不是那么明显。
2.基本形式
<script>
function loadImage(id,url,callback)
{
var img = new Image();
img.src = url;
// 图片存在缓存中
if(img.complete){
callback(id,url);
return;
}
// 图片加载到浏览器的缓存中回调函数
img.onload = function(){
callback(id,url);
}
}
</script>3.应用
利用预加载显示3张1980*1080的图片，正常加载的话会慢慢显示出来。而用预加载的话，等一会3张基本同时显示出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="img_box">
<img data-src="http://wozien.com/img/1.jpg" alt="">
<img data-src="http://wozien.com/img/2.jpg" alt="">
<img data-src="http://wozien.com/img/3.jpg" alt="">
</div>
<script>
function loadImage(obj,url,callback)
{
var img = new Image();
img.src = url;
// 判断图片是否在缓存中
if(img.complete){
callback.call(img,obj);
return;
}
// 图片加载到浏览器的缓存中回调函数
img.onload = function(){
callback.call(img,obj);
}
}
function showImage(obj){
obj.src = this.src;
}
var imgs = document.querySelectorAll('img');
for(var i = 0;i<imgs.length;i++)
{
var url = imgs[i].dataset.src;
loadImage(imgs[i],url,showImage);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 