ajax - 在寫入頁面之前檢查圖像已加載

Question

我有一個問題，我剛剛發現，我認爲這個項目完成後。它在我的本地服務器上完美運行，但是當我將代碼實時推送時，圖像可能需要半秒才能正確加載，導致在加載圖像上彈出一個小頁面縮略圖。哎呀

alt text http://img815.imageshack.us/img815/985/loading.jpg

所以發生了什麼？那麼首先，一個函數運行在window.load上，這個函數創建了大量帶有加載gif的列表項目作爲bg圖像。

那麼這個功能會彈出一個<img>標籤到第一個列表項，與onload它通過一個XML文件調用第二功能

這第二個函數週期和包裝在XML中的URL在<img>標籤和看跌期權它在下一個空的LI。這是問題所在。目前它將<img src=$variable onload=loadnextimage() />放入實際加載之前的List項目中。

我的代碼：

$(window).load(function() { 
      txt=""; 
      for(d=0;d<100;d++) 
      { 
       txt=txt + "<li class='gif' id='loading"+d+"'></li>"; 

      } 
      document.getElementById('page-wrap').innerHTML=txt; 
      document.getElementById('loading0').innerHTML="<img src='images/0.jpg' onLoad='loadImages(0)' />"; 
     }); 
     function loadImages(i){ 
      i++ 
      $.ajax 
      ({ 
       type: "GET", 
       url: "sites.xml", 
       dataType: "xml", 
       async: "true", 
       success: function(xml) 
       { 
        var img = $(xml).find('image[id=' + i + ']'), 
        id = img.attr('id'), 
        url = img.find('url').text(); 
        $('#loading'+i).html('<img src="'+url+'" onLoad="loadImages('+i+')" />').hide(); 
        $('#loading'+i).fadeIn(); 
       } 
      }); 
     } 

我有一種感覺，這可能是相當棘手實現這一點，我怎麼有它設置，我有一種感覺，我可能需要創建一個img對象，並等待到加載？？？

一旦頁面緩存加載顯然工作正常，但它首先加載時有點痛苦，所以我需要解決這個問題。 任何建議歡迎:)謝謝

Answer 1

在我看來，你正在努力的思考。有時解決方案正在改變思維方式。這完全取決於你。 One of my favorite related books.

我的建議有類似下面的代碼。這不完全是你需要的，但...

Demo on Fiddle

HTML：

<div class="frame" title="Tochal Hotel"> 
    <div class="loadingVitrin"> 
     <img src="http://photoblog.toorajam.com/photos/4cf85d53afc37de7e0cc9fa207c7b977.jpg" onload="$(this).fadeTo(500, 1);"> 
    </div> 
</div>​ 

CSS：

html, body { 
    padding: 10px; 
} 

.frame { 
    z-index: 15; 
    box-shadow: 0 0 10px gray; 
    width: 350px; 
    height: 350px; 
    border: gray solid 1px; 
    padding: 5px; 
    background: #F0F9FF; 
} 

.loadingVitrin { 
    z-index: 15; 
    width: 350px; 
    height: 350px; 
    overflow: hidden; 
    background: url("http://photoblog.toorajam.com/images/main/ajax-loader.gif") no-repeat center; 
} 

.loadingVitrin img { 
    display: none; 
    height: 350px; 
} 
​ 

Answer 2

我有同樣的問題。試圖獲得答案我已經達到你的問題。無論如何，我設法解決它的方式是：

<div style="visibility:hidden; position:absolute; margin-left:-10000px;"> 
    <img src="foo.png" /> 
    // place all the images in here that you eventually will need 
</div> 

圖像將被異步下載。如果你已經有一個圖像，它不會再被下載，它將被存儲在瀏覽器的緩存中。所以如果用戶在第一頁花費30秒，那麼整個網站會更快。這取決於你的網站的大小。但是這可以解決使用小型網站時的問題。

我知道這不是一個真正的解決方案，我會開始在你的問題上的賞金。

Answer 3

success: function(xml) { 
    var img = $(xml).find('image[id=' + i + ']'), 
     id = img.attr('id'), 
     url = img.find('url').text(); 
    // hide loading 
    $('#loading'+i).hide(); 
    $('<img src="'+url+'" onLoad="loadImages('+i+')" />').load(function() { 
     // after image load 
     $('#loading' + i).html(this); // append to loading 
     $('#loading'+i).fadeIn(); // fadeIn loding 
    }); 
} 

Answer 4

感謝@thecodeparadox我結束了：

$.get("SomePage.aspx", "", function (r) { 

    // r = response from server 

    // place response in a wrapper 
    var wrapper = $('<div id="wrapper" style=""></div>').html(r); 

    // need to write the images somewhere in the document for the event onload to fire 
    // loading content is a hidden div in my document. 
    $(document).append(wrapper); 
    //$("#LoadingContent").html("").append(wrapper); 

    var counter = 0; 

    var images = $(wrapper).find("img"); // get all the images from the response 

    // attach the onload event to all images 
    images.bind("load", function() { 

     counter++; 

     if (counter == images.size()) { // when all images are done loading 
      // we are now save to place content 
      // place custom code in here 
      // executeSomeFuction(); 
      $("#AjaxContent").html(r); 
      $(document).remove(wrapper); 
     } 
    }); 

}, "text"); 

Answer 5

您只需用Image（）對象預加載每個圖像。 下面給出的腳本非常易於使用。只需在「callbackFN（）」中寫入你想要做的任何代碼，然後你「preload_images（array_img）」。更多precisly：

var array_images = []; 
    $.ajax 
      ({ 
       type: "GET", 
       url: "sites.xml", 
       dataType: "xml", 
       async: "true", 
       success: function(xml) 
       { 
        var img = $(xml).find('image[id=' + i + ']'), 
        id = img.attr('id'), 
        url = img.find('url').text(); 
        array_images.push(url); 
       } 
      }); 




// Your callback function after loading: 
function callbackFN() { 
    // Do whatever you want HERE 
    // Pretty much this: 
    for (var i = 1; i<=array_images.length; i++) { 
     $('#loading'+i).html('<img src="'+url+'" />').hide(); 
     $('#loading'+i).fadeIn(); 
    } 
} 


var array_obj = Array(); 
var iKnowItsDone = false; 
// Timer (IE BULLET PROOF) 
var ieCheckImgTimer; 
     // Check if images are loaded 
    function images_complete(obj) { 
     var max = obj.length; 
     var canGo = true; 
     for (var i = 0; i<max; i++){ 
      if (!obj[i].complete) { 
       canGo = false; 
      } 
     } 
     return canGo; 
    } 
    // Loop to check the images 
    function preload_images(obj) { 
     var max = obj.length; 
     for (var i = 0; i<max; i++){ 
      var img = new Image(); 
      img.src = obj[i]; 
      array_obj.push(img); 

      img.onload = function() { 
       check_img(); 
      } 
     } 
     ieCheckImgTimer = setTimeout('check_img()',250); 
    } 

     // Timer to see if all the images are loaded yet. Waits till every img are loaded 
    function check_img() { 
     if (ieCheckImgTimer) { 
      clearTimeout(ieCheckImgTimer); 
     } 
     if (images_complete(array_obj) && !iKnowItsDone) { 
      iKnowItsDone = true; 
      callbackFN(); 
     } 
     else { 
      ieCheckImgTimer = setTimeout('check_img()',250); 
     } 
    } 

Answer 6

試試這個：

ThumbImage = document.createElement("img"); 
ThumbImage.src = URL; 

ThumbImage.onload = function(){ 
    //function After Finished Load      
} 

Answer 7

你要確保圖像是由瀏覽器加載的，即在瀏覽器的緩存，將其添加到文檔之前：

// create an image element 
$('<img />') 
    // add a load event handler first 
    .load(function() { 
     // append the image to the document after it is loaded 
     $('#loading').append(this); 
    }) 
    // then assign the image src 
    .attr('src', url); 

因此，對於你的代碼，我會做：

$(window).load(function() { 
    var txt=""; 
    for(var d=0;d<100;d++) 
    { 
     txt=txt + "<li class='gif' id='loading"+d+"'></li>"; 

    } 
    document.getElementById('page-wrap').innerHTML=txt; 

    $('<img />') 
     .load(function() { 
      $('#loading0').append(this); 
      loadImages(0); 
     }) 
     .attr('src', 'images/0.jpg'); 
}); 
function loadImages(i){ 
    i++ 
    $.ajax 
    ({ 
     type: "GET", 
     url: "sites.xml", 
     dataType: "xml", 
     async: "true", 
     success: function(xml) 
     { 
      var img = $(xml).find('image[id=' + i + ']'), 
      id = img.attr('id'), 
      url = img.find('url').text(); 

      $('<img />') 
       .load(function() { 
        $('#loading' + i) 
         .append(this) 
         .hide() 
         .fadeIn(); 
        loadImages(i); 
       }) 
       .attr('src', url); 
     } 
    }); 
} 

也許這只是您的示例代碼，但我不明白爲什麼0.jpg和sites.xml或其他圖像無法同時加載：

$(window).load(function() { 
    var buf = [], d; 
    for (d = 0; d < 100; d++) { 
     buf.push('<li class="gif" id="loading' + d + '"></li>'); 
    } 
    $('#page-wrap').html(buf.join('')); 

    $('<img />') 
     .load(function() { 
      $('#loading0').append(this); 
     }) 
     .attr('src', 'images/0.jpg'); 

    $.ajax({ 
     type: 'GET', 
     url: 'sites.xml', 
     dataType: 'xml', 
     async: true, 
     success: function(xml) { 
      var img, id, url, i; 

      xml = $(xml); 

      for (i = 1; i < 100; i++) { 
       img = xml.find('image[id=' + i + ']'); 
       id = img.attr('id'); 
       url = img.find('url').text(); 

       $('<img />') 
        .load(function() { 
         $('#loading' + i) 
          .append(this) 
          .hide() 
          .fadeIn(); 
        }) 
        .attr('src', url); 
      } 
     } 
    }); 
});