Ajax - überprüfen Sie Bilder geladen haben, bevor Sie auf die Seite schreiben

Question

Ich habe ein bisschen ein Problem, das ich gerade gefunden habe, nachdem ich dachte, dieses Projekt beendet wurde. Es funktionierte perfekt auf meinem lokalen Server, aber wenn ich den Code live aktivierte, konnten die Bilder eine halbe Sekunde dauern, um richtig geladen zu werden, wodurch ein kleines Seiten-Thumbnail über einem Ladebild angezeigt wurde. grrr

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

Also was ist passiert? Nun, zuerst eine Funktion läuft auf window.load, die eine große Anzahl von Listenelementen mit einem Lade-GIF als das BG-Bild erstellt.

Dann ist diese Funktion erscheint ein <img> Tag in das erste Listenelement mit einem onload, die eine zweite Funktion

Diese zweite Funktion Zyklen über eine XML-Datei und hüllt die URL in der XML in einem <img> Tag und Puts ruft es in der nächsten leeren LI. Hier liegt das Problem. Im Moment legt es die <img src=$variable onload=loadnextimage() /> in das Listenelement, bevor es tatsächlich geladen wurde.

Mein Code:

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

Ich habe das Gefühl, es kann ziemlich schwierig dies zu erreichen sein, wie ich es einrichten, und ich habe das Gefühl, ich brauche kann, dass, um ein img Objekt und warten erstellen Belastung???

Sobald die Seite zwischengespeichert ist, funktioniert das Laden offensichtlich gut, aber es ist ein bisschen ein Schmerz beim ersten Laden, also muss ich das beheben. jeder raten willkommen :) danke

Answer 1

Meiner Meinung nach denken Sie auf eine harte Art. Manchmal ändert die Lösung die Art zu denken. Es hängt vollständig von dir ab. One of my favorite related books.

Mein Vorschlag ist etwas wie der Code unten haben. Es ist nicht genau das, was du brauchst, aber ...

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

Ich hatte das gleiche Problem. Beim Versuch, eine Antwort zu erhalten, habe ich Ihre Frage erreicht. Wie auch immer ich es schaffte, es irgendwie zu lösen, indem ich platzierte:

<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> 

die Bilder werden asynchron heruntergeladen. Wenn Sie bereits ein Bild haben, wird es nicht erneut heruntergeladen, sondern im Cache des Browsers gespeichert. Wenn der Nutzer also 30 Sekunden auf der ersten Seite verbringt, ist die gesamte Website viel schneller. Nun, es hängt von der Größe Ihrer Seite ab. aber das löst das Problem bei der Verwendung einer kleinen Website.

Ich weiß, das ist keine echte Lösung Ich werde ein Kopfgeld auf Ihre Frage starten.

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

Dank @thecodeparadox ich mit endete:

$.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

Sie müssen nur jedes Bild mit dem Image() -Objekt vorab laden. Das folgende Skript ist ziemlich einfach zu verwenden. Schreiben Sie einfach in den "callbackFN()" welchen Code Sie auch machen wollen und dann "preload_images (array_img)". precisly Mehr: Diese

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

Versuchen:

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

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

Answer 7

Sie wollen das Bild, um sicherzustellen, durch den Browser geladen wird, das heißt in dem Cache des Browsers, bevor es zu dem Dokument hinzufügen:

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

Also für Ihren Code würde ich tun:

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

Vielleicht ist es nur Ihr Beispielcode, aber ich verstehe nicht, warum 0.jpg und sites.xml oder der Rest der Bilder nicht gleichzeitig geladen werden können:

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