ajax - las imágenes de verificación se han cargado antes de escribir en la página

Question

Tengo un pequeño problema que acabo de encontrar, después de que pensé que este proyecto había terminado. Funcionó perfectamente en mi servidor local, pero cuando presioné el código en vivo, las imágenes pueden tardar medio segundo en cargarse correctamente, causando que una pequeña miniatura de la página aparezca sobre una imagen de carga. grrr

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

Así qué está sucediendo? Bueno, primero se ejecuta una función en window.load que creó una gran cantidad de elementos de la lista con un gif cargado como la imagen bg.

A continuación, esta función elimina una etiqueta <img> en el primer elemento de la lista, con un onload que llama a una segunda función

Este segundo ciclos de función a través de un archivo XML y envuelve la dirección URL en el xml en una etiqueta y pone <img> en el próximo vacío LI. aquí es donde yace el problema. Por el momento, pone <img src=$variable onload=loadnextimage() /> en el elemento Lista antes de que se haya cargado realmente.

Mi código:

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

tengo la sensación de que puede ser bastante complicado lograr esto cómo lo tengo configurado, y tengo la sensación de que puede ser necesario crear un objeto img y esperar a que eso ¿¿¿carga???

Una vez que la página está almacenada en caché, la carga, obviamente, funciona bien, pero es un poco ont en la primera carga, así que tengo que solucionar esto. cualquier consejo bienvenido :) gracias

Answer 1

En mi opinión, estás pensando de una manera difícil. A veces la solución está en cambiar la forma de pensar. Es completamente depende de ti. One of my favorite related books.

Mi sugerencia es similar al siguiente código. No es exactamente lo que necesitas, pero ...

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

Tuve el mismo problema. tratando de obtener una respuesta llegué a su pregunta. de todos modos el camino logré tipo de resolverlo fue colocando:

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

las imágenes se pueden descargar de forma asíncrona. si ya tiene una imagen, no se volverá a descargar, sino que se almacenará en la memoria caché del navegador. entonces, si el usuario gasta 30 segundos en la primera página, todo su sitio será mucho más rápido. bueno, depende del tamaño de tu sitio. pero esto resuelve el problema cuando se usa un sitio web pequeño.

Sé que esta no es una solución real Comenzaré una recompensa por su pregunta.

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

Gracias a @thecodeparadox que terminó con:

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

Solo tiene que cargar previamente cada imagen con el objeto Image(). El siguiente guión es bastante fácil de usar. Simplemente escriba en "callbackFN()" el ​​código que desee y luego "preload_images (array_img)". Más Precisa:

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

Prueba esto:

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

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

Answer 7

Usted quiere asegurarse de que la imagen se carga en el navegador, es decir, en la caché del navegador, antes de añadirlo al documento:

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

Así que para el código que haría:

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

Tal vez es solo su código de muestra, pero no veo por qué 0.jpg y sites.xml, o el resto de las imágenes, no se pueden cargar al mismo tiempo:

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