您的位置：首页 > 其它

判断图片加载完成

2016-02-02 11:40 387 查看

1、用原生js来判断图片加载，

document.getElementById("img2").onload=function(){}

2、如果用多种图片，用jquery来判断呢，应该是这样吧？

$("").load(function(){...});

中选择器是图片的id或class，function里面的方法就是回调函数，在图片加载完成后执行，但是我试验了很多，压根儿不是那么回事，正确的解决方法是：

$("#imageId").load(function(){
alert("加载完成！");
});

3、在网上找到一段代码，写好的一个

function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象，实现图片的预下载
img.src = url;

if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};

callback回调行数，就是判断图片加载完成后要运行的函数

4、下面是针对多个image的加载判断。

var imgdefereds=[];
$('img').each(function(){
var dfd=$.Deferred();
$(this).bind('load',function(){
dfd.resolve();
}).bind('error',function(){
//图片加载错误，加入错误处理
// dfd.resolve();
})
if(this.complete) setTimeout(function(){
dfd.resolve();
},1000);
imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
callback();
});

使用这种方法就可以避免window.onload的不足，不过代码稍显复杂在性能方面比起window.onload经强很多。

5、最后我写的一个图片等比例缩放居中显示的jquery插件的dome

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>图片按比例自适应缩放</title>
<script src="jquery.js"></script>
<style>
.list1,
.list2{overflow: hidden;margin:20px 0;}
.list1 li,
.list2 li{
float:left;
margin:10px;
text-align: center;
width: 200px;
height: 300px;
border: 1px solid #ddd;
overflow: hidden;
}
</style>
</head>
<body>
<div class="list1">
<ul>
<li><img src="http://www.wallcoo.com/1920x1440/1920x1440_nature_wallpapers_02/wallpapers/1920x1440/%5Bwallcoo.com%5D_1920X1440_nature_wallpapers_aVistas006.jpg" alt="alipay"/></li>
<li><img src="http://img2.cache.hxsd.com/game/2012/01/13/646913_1326427920_3.jpg" alt="alipay"/></li>
<li><img src="http://image.big5.made-in-china.com/2f0j01aBnEQSLGvRuF/D%E5%9E%8B%E6%89%A3%EF%BC%88P10004%EF%BC%89.jpg" alt="alipay"/></li>
<li><img src="http://i3.hexunimg.cn/2015-12-31/181542031.jpg" alt="alipay"/></li>
</ul>
</div>
<div class="list2">
<ul>
<li><img src="http://i1.sinaimg.cn/gm/2013/0826/U4670P115DT20130826173112.jpg" alt="alipay"/></li>
<li><img src="http://cdn.duitang.com/uploads/item/201305/27/20130527155926_GjC8x.jpeg" alt="alipay"/></li>
<li><img src="http://www.012logo.com/webpic/D%B1%EA%D6%BElogo%C9%E8%BC%C6%D7%F7%C6%B7%20%2824%29.png" alt="alipay"/></li>
<li><img src="http://img4q.duitang.com/uploads/item/201506/27/20150627073905_kJXEn.jpeg" alt="alipay"/></li>
</ul>
</div>
<script>
$.fn.resizeImg = function (opt) {
var imgdefereds = [];
return this.each(function () {
opt = $.extend({
maxWidth: 150,
maxHeight: 200
}, opt);

var $self = $(this);

$self.hide();
var dfd = $.Deferred();
$(this).bind('load', function () {
dfd.resolve();
}).bind('error', function () {
//图片加载错误，加入错误处理
// dfd.resolve();
})
if (this.complete) setTimeout(function () {
dfd.resolve();
}, 1000);
imgdefereds.push(dfd);
$.when.apply(null, imgdefereds).done(function () {
var w = $self.outerWidth(),
h = $self.outerHeight();
$self.css('position', 'relative');
$self.show();
// 当图片比预览区域小时不做任何改变
if (w < opt.maxWidth && h < opt.maxHeight){
$self.css('top', (opt.maxHeight - h) / 2);
return;
}
// 当实际图片比例大于预览区域宽高比例时
// 缩放图片宽度，反之缩放图片宽度
if (w / h > opt.maxWidth / opt.maxHeight) {
$self.width(opt.maxWidth);
$self.css('top', (opt.maxHeight - h * opt.maxWidth / w) / 2);
} else {
$self.height(opt.maxHeight);
}
});
});

}
$(document).ready(function () {
$('.list1 img').resizeImg({
maxWidth: 200,
maxHeight: 300
});
$('.list2 img').resizeImg({
maxWidth: 200,
maxHeight: 300
});
});

</script>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航