浏览器加载图片区别:
- IE:同时加载与渲染
- 其他:加载完之后再渲染
根据这个差异用jQuery做个实例:按顺序加载一组图片,加载完成后提示.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>顺序加载图片demo</title>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript">
$(function() {
$("button").click(function() {
$(this).css({display: 'none'}); // 隐藏按钮
$("#imgBox").css({display: 'inline-block'}); // 显示图片区域
//获取图片src数组
var imgPathArr = getImgInfo();
for (var i = 0; i < imgPathArr.length; i++) {
loadImg(i, imgPathArr[i], function(){
// 提示加载完成
alert("done");
});
};
}); function loadImg(index, imgPath, callback) {
var imgO = new Image();
$(".a1").append(imgO); var temp = document.getElementById("imgBox");
var imgt = temp.getElementsByTagName("img")[0];
imgt.onload = function(){
callback();
}; $("img").eq(index).attr('src', imgPath);
}
//获取图片信息
function getImgInfo(){
//图片信息
return imgInfo= [
"https://www.videocopilot.net/assets/public/images/v6/products/boxes/jetstrike_large.png",
"https://www.videocopilot.net/assets/public/images/v6/products/boxes/flightkit_large.png",
"https://www.videocopilot.net/assets/public/images/v6/products/boxes/metropolitan_large.png",
"https://www.videocopilot.net/assets/public/images/v6/products/boxes/projectileweapons_large.png",
];
}
});
</script>
</head>
<body>
<div id="imgBox">
<div class="a1"></div>
</div>
<button>Click Me</button>
</body>
</html>
经测试,bug:
- IE下显示顺序乱的
- FF看不出...
待更新...