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); 
      } 
     } 
    }); 
});