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>