DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jq和js判斷圖片加載完成
jq和js判斷圖片加載完成
編輯:JQuery特效代碼     

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>
         .cnt {
             text-align: center;
             width: 500px;
             height: 300px;
             margin: 0 auto;
             border: 1px solid #ddd;
             overflow: hidden;
         }
     </style>
 </head>
 <body>
 <div class="cnt">
     <img
             src="http://hovertree.com/hvtimg/201601/p3t2ldyr.png"
             alt="alipay"/>
 </div>
 <div class="cnt">
     <img
             src="http://hovertree.com/hvtimg/201601/lbau8hqb.png"
             alt="alipay"/>
 </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();
                 // 當圖片比預覽區域小時不做任何改變
                 if (w < opt.maxWidth && h < opt.maxHeight) return;
                 // 當實際圖片比例大於預覽區域寬高比例時
                 // 縮放圖片寬度,反之縮放圖片寬度
                 $self.css('position', 'relative');
                 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);
                 }
                 $self.show();
             });
         });
 
     }
     $(document).ready(function () {
         $('.cnt img').resizeImg({
             maxWidth: 300,
             maxHeight: 300
         });
     });
 
 
 </script>
 </body>
 </html>

 

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved