在執行其他代碼之前完成加載圖像

我正在使用模式窗口在縮略圖上顯示圖片。
但是，調整大小的照片沒有被加載到模態窗口中。在執行其他代碼之前完成加載圖像

圖像的src最初並不在我的標記中，但是我通過在標籤上添加它來將它添加到標記中。我第二次點擊它，圖片加載到模態中。

查看控制檯時，我能夠第一次獲得高度和寬度。第二次，我得到的高度和寬度加上「圖像加載」文本。

我想檢查照片是否已加載，如果已完成，請執行其餘代碼。如果未加載，請繼續檢查，直至加載完成，然後繼續執行其餘代碼。

我已閱讀關於堆棧溢出的其他文章，但他們都沒有爲我工作。有些人可以幫忙。

$(document).ready(function() { 

    function galleryStart ($current) { 


     var $tImage  = $current.find('img'); 
     var fullURL  = $tImage.attr('src'); 
     var $dFigure   = $('#dialog-media figure .media'); 
     var fullSrcURL = "images/mypicture"; 
     var fullSrcURL = fullURL.replace(".jpg", "_full.jpg"); 


     var image; 

     function onload() { 
     console.log(image.height, image.width); 
     var objHeight = image.height; 
     var objWidth = image.width; 
     } 

     image= new Image(); 
     image.src=fullSrcURL; 

     if (image.complete) { 
     console.log('image already loaded to browser'); 
     onload(); 
     } else { 

     image.onload = onload; 
     console.log('xxx'); 
     } 

    $dFigure.append('<img id="dialog-media-object" src="' + fullSrcURL + '" alt="' +   $tImage.attr('alt') + '" />'); 

    //Execute more code here once the image has finished loading 
    //More code to load the image into the modal window 
} 

$('a.dialog-media').click(function (event) { 
    event.preventDefault(); 

      $("#dialog").dialog({ 
      height: "auto", //720 
      width: "auto", //960 
      draggable: false, 
      modal: true, 
      //position: { 
      //   my: "center", 
      //   at: "center", 
      //   of: window }, 
      open: function(event, ui){ 
       galleryStart(tLink); 
      }, 
     close: function(event, ui){ 
       galleryEnd(); 
     $(this).dialog('destroy').remove(); 


});

}）; //最終收盤標籤

來源

2013-10-03 Moxie C

在這 - '$（」＃dialog-media figure .media'）;''figure'是什麼？應該是'$（'＃dialog-media-figure .media'）;'而不是？ – Archer

@Archer - 'figure'是一個新的HTML5標籤。 – Steve

謝謝@Steve。不幸的是，我不得不迎合HTML5以前的版本，所以還沒有機會使用它。我是一個壞的方式復古:( – Archer

您可以使用圖像onload事件這樣：

image= new Image(); 
image.onload = onLoadHandler; 
image.src=fullSrcURL; 

function onLoadHandler() { 
    alert("Image is loaded!"); 
}

注意：您指定的onLoadHandler到image.onload之前，您指定的源是很重要的。

所以你的情況，我會跳過整個image.complete聲明，做這樣的事情：

var $dFigure = $('#dialog-media figure .media'); 
var fullSrcURL = "images/mypicture"; 
var image; 

function onload() { 
    console.log(image.height, image.width); 
    var objHeight = image.height; 
    var objWidth = image.width; 
    $dFigure.append('<img id="dialog-media-object" src="' + fullSrcURL + '" alt="' + $tImage.attr('alt') + '" />'); 
} 

image= new Image(); 
image.onload = onload; 
image.src=fullSrcURL;

來源

2013-10-03 18:58:14 Steve

我把其餘的代碼函數onLoadHandler在圖像加載後將代碼的其餘部分放入執行程序中？ –

如果您的代碼執行取決於圖像的可用性，那麼您必須將該代碼放入'onload'函數（或至少從那裏觸發）。 – Steve

我會試試這個，讓你知道結果。 –

只需創建使用jQuery的DOM元素：

(function($){ 
    $(function() { 
     // create image 
     $('<img>') 
      // add onLoad handler 
      .load(whenImageIsLoadedFunction) 
      // set the images 'src' 
      .attr('src', 'your/image/source.png'); 
    }); 

    function whenImageIsLoadedFunction() { 
     // do all your code here. 
     $(this).appendTo('#imageContainer'); 
    } 
}(jQuery));

來源

2013-10-03 19:05:42 jukempff

我不反對這個答案，但對於這個直接的事情來說，一個jQuery函數是如此巨大的開銷，我更喜歡普通的JS方法。 – Steve

那麼，如果我們談論成千上萬的圖像，你可能會有一個觀點。但即使我們願意，在JS甚至發現重載之前，DOM API會告別。您的解決方案創建2個圖像實例。 – jukempff

在執行其他代碼之前完成加載圖像

回答

相關問題