Événement d'image onload ne se déclenche pas sur Windows Phone 8

J'ai écrit une galerie d'images jQuery plugin pour un site mobile que je suis en train de développer. Pour chaque image dans la galerie, j'ai basse résolution et haute résolution.Événement d'image onload ne se déclenche pas sur Windows Phone 8

La galerie est affichée en plein écran, chaque image étant initialement remplie avec les images de basse résolution. Quand un utilisateur balaie vers la gauche/droite à une image donnée, je veux commencer à charger l'image haute résolution tranquillement et l'échanger avec la basse résolution une fois terminée.

Actuellement, cela fonctionne sur iOS et Android, mais sur Windows Phone 8, l'événement onload de l'image haute résolution ne semble pas se déclencher, donc le swap n'a jamais lieu.

code:

var image = images[images_i]; 
if (image.$el && image.full && image.$el.attr('src') != image.full) { 
    var fullImage = new Image(); 
    fullImage.onload = function() { 
     image.$el.attr('src', image.full); 
    }; 
    fullImage.src = image.full; 
}

(galerie génère un hachage 'images' qui contient chaque URL de l'image, objet jQuery, métadonnées, etc.)

J'ai aussi essayé à l'origine d'insérer en fait une nouvelle image cachée dans la DOM, et en utilisant jQuery pour lier à l'événement load. Cependant, j'ai trouvé que cela ne se déroulait pas systématiquement si l'image était déjà en cache, donc j'ai dû ajouter une autre vérification pour $ image.prop ('complete'). Cela a produit le même résultat sur WP8.

Source

2013-02-20 Danny

Je sais que IE avait un problème que si l'image est mise en cache l'événement onload ne se déclencherait pas. Le moyen de contourner le problème était de vérifier s'il y a une hauteur, si c'est le cas, l'image est chargée et vous pouvez appeler la méthode onload. – epascarello

Apparemment, j'étais vraiment proche de ma première tentative, mais j'ai fait l'erreur de mal classer les choses. Toutes les réponses que j'ai vu sur SO à propos de ce problème incluaient uniquement la gestion des événements onload pour les images, mais ne tenaient pas compte du fait que si IE avait déjà mis en cache l'image, cet événement ne se déclencherait pas.

Solution complète:

var fullImage = new Image(); 
fullImage.onload = function() { 
    $img.attr('src', fullImageUrl); 
}; 
fullImage.src = image.full; 
if ($(fullImage).prop('complete') { 
    $img.attr('src', fullImageUrl); 
}

$ (fullImage) .prop ('complète') retourne vrai si l'image est déjà mis en mémoire cache.

Source

2013-02-21 17:37:48 Danny

Événement d'image onload ne se déclenche pas sur Windows Phone 8

Répondre

Questions connexes