J'ai un peu un problème que je viens de trouver, après avoir pensé que ce projet avait fini. Cela a fonctionné parfaitement sur mon serveur local mais quand j'ai poussé le code en direct, les images peuvent prendre une demi-seconde pour se charger correctement, provoquant l'apparition d'une petite vignette de page sur une image de chargement. grrrajax - vérifier les images ont chargé avant d'écrire à la page
alt text http://img815.imageshack.us/img815/985/loading.jpg
Alors ce qu'il se passe? Eh bien d'abord une fonction fonctionne sur window.load
qui a créé un grand nombre d'éléments de liste avec un gif de chargement comme l'image bg.
Ensuite, cette fonction pops une balise <img>
dans le premier élément de la liste, avec un onload
qui appelle une seconde fonction
Ce second cycles de fonction dans un fichier XML et encapsule l'URL dans le fichier XML dans une balise <img>
et met dans le vide suivant LI
. Là est le problème. À l'heure actuelle, il place le <img src=$variable onload=loadnextimage() />
dans l'élément de liste avant qu'il ne soit réellement chargé.
Mon 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();
}
});
}
Je sens qu'il peut être atteinte assez difficile ce que je l'ai mis en place, et j'ai un sentiment que je peux avoir besoin de créer un objet img et attendre que cela charge???
Une fois que la page est mise en mémoire cache, le chargement fonctionne bien, mais c'est un peu pénible en premier chargement, donc j'ai besoin de résoudre ce problème. tout conseiller bienvenue :) merci