Fading dans les grandes images dans Chrome

Question

Je rencontre des problèmes avec les grandes images, mais uniquement avec Chrome.

est ici la configuration de base absolument:

$(document).ready(function(){ 
    var img = new Image(); 
    $(img) 
     .hide() 
     .load(function(){ 
     $(this).fadeIn(3000) 
     }) 
     .attr("src", "files/originals/01.jpg") 
    $("body").append(img) 
}); 

Pour autant que je sais que c'est la façon traditionnelle pour créer une image à la volée, le charger et fadeIn quand il est fait le chargement. Maintenant, cela fonctionne parfaitement dans FireFox, Safari et même IE, mais pas dans Chrome lorsque j'utilise de grandes images (résolutions supérieures à 1900x1200). Et avant que quelqu'un flammes sur la taille, je devrais ajouter que c'est une exigence pour le projet. Qu'est-ce qui se passe dans tous les navigateurs, mais Chrome est qu'il y a un délai pendant le chargement de l'image (attendue) et dès qu'il est fait. Dans Chrome, je reçois le délai normal pendant le chargement de l'image, puis un autre retard durée du fadeIn (dans mon exemple 3000ms) après quoi l'image "apparaît" simplement comme si j'utilisais show(). De plus petites images fonctionnent parfaitement dans tous les navigateurs.

Ce qui donne? Qu'est-ce qu'il me manque?

Answer 1

Peut-être essayer de déplacer l'insertion de l'image dans le DOM une fois qu'il a été chargé? Comme ceci:

$(document).ready(function(){ 
    var img = new Image(); 
    $(img) 
     .hide() 
     .load(function(){ 
     $("body").append(this); 
     $(this).fadeIn(3000); 
     }) 
     .attr("src", "files/originals/01.jpg") 
});