判断图片加载完成

最新推荐文章于 2022-11-08 19:46:06 发布

weixin_30411819

最新推荐文章于 2022-11-08 19:46:06 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/niubenbit/p/5177115.html

版权

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

document.getElementById("img2").οnlοad=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

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>图片按比例自适应缩放</title>
 6     <script src="jquery.js"></script>
 7     <style>
 8         .list1,
 9         .list2{overflow: hidden;margin:20px 0;}
10         .list1 li,
11         .list2 li{
12             float:left;
13             margin:10px;
14             text-align: center;
15             width: 200px;
16             height: 300px;
17             border: 1px solid #ddd;
18             overflow: hidden;
19         }
20     </style>
21 </head>
22 <body>
23 <div class="list1">
24     <ul>
25         <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>
26         <li><img src="http://img2.cache.hxsd.com/game/2012/01/13/646913_1326427920_3.jpg" alt="alipay"/></li>
27         <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>
28         <li><img src="http://i3.hexunimg.cn/2015-12-31/181542031.jpg" alt="alipay"/></li>
29     </ul>
30 </div>
31 <div class="list2">
32     <ul>
33         <li><img src="http://i1.sinaimg.cn/gm/2013/0826/U4670P115DT20130826173112.jpg" alt="alipay"/></li>
34         <li><img src="http://cdn.duitang.com/uploads/item/201305/27/20130527155926_GjC8x.jpeg" alt="alipay"/></li>
35         <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>
36         <li><img src="http://img4q.duitang.com/uploads/item/201506/27/20150627073905_kJXEn.jpeg" alt="alipay"/></li>
37     </ul>
38 </div>
39 <script>
40     $.fn.resizeImg = function (opt) {
41         var imgdefereds = [];
42         return this.each(function () {
43             opt = $.extend({
44                 maxWidth: 150,
45                 maxHeight: 200
46             }, opt);
47 
48             var $self = $(this);
49 
50             $self.hide();
51             var dfd = $.Deferred();
52             $(this).bind('load', function () {
53                 dfd.resolve();
54             }).bind('error', function () {
55                 //图片加载错误，加入错误处理
56                 // dfd.resolve();
57             })
58             if (this.complete) setTimeout(function () {
59                 dfd.resolve();
60             }, 1000);
61             imgdefereds.push(dfd);
62             $.when.apply(null, imgdefereds).done(function () {
63                 var w = $self.outerWidth(),
64                         h = $self.outerHeight();
65                 $self.css('position', 'relative');
66                 $self.show();
67                 // 当图片比预览区域小时不做任何改变
68                 if (w < opt.maxWidth && h < opt.maxHeight){
69                     $self.css('top', (opt.maxHeight - h) / 2);
70                     return;
71                 }
72                 // 当实际图片比例大于预览区域宽高比例时
73                 // 缩放图片宽度，反之缩放图片宽度
74                 if (w / h > opt.maxWidth / opt.maxHeight) {
75                     $self.width(opt.maxWidth);
76                     $self.css('top', (opt.maxHeight - h * opt.maxWidth / w) / 2);
77                 } else {
78                     $self.height(opt.maxHeight);
79                 }
80             });
81         });
82 
83     }
84     $(document).ready(function () {
85         $('.list1 img').resizeImg({
86             maxWidth: 200,
87             maxHeight: 300
88         });
89         $('.list2 img').resizeImg({
90             maxWidth: 200,
91             maxHeight: 300
92         });
93     });
94 
95 
96 </script>
97 </body>
98 </html>