Увядание больших изображений в Chrome

Question

У меня возникли проблемы с выцветанием на больших изображениях, но только в Chrome.

Вот абсолютно базовая настройка:

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

Насколько я знаю, что это обычный способ создания изображения на лету, загрузить его, и FadeIn, когда он загрузится. Теперь это прекрасно работает в FireFox, Safari и даже в IE, но не в Chrome, когда я использую большие изображения (разрешение больше 1900x1200). И перед тем, как кто-то плачет о размере, я должен добавить, что это требование для проекта. Что происходит во всех браузерах, но Chrome заключается в том, что есть задержка, пока изображение загружается (ожидается), и как только оно завершается, оно исчезает. В Chrome я получаю регулярную задержку при загрузке изображения, а затем еще одну задержку для длительность fadeIn (в моем примере 3000 мс), после чего изображение просто «появляется», как если бы я использовал show(). Меньшие изображения прекрасно работают во всех браузерах.

Что дает? Что мне не хватает?

Answer 1

Возможно, попробуйте переместить вставку изображения в DOM после его загрузки? Например:

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