Выцветание на больших изображениях в Chrome - PullRequest
Новая
       20

Выцветание на больших изображениях в Chrome

2 голосов
/ 20 октября 2010

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

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

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

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

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

1 Ответ

2 голосов
/ 20 октября 2010

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

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