четверг, 23 ноября 2017 г.

Борьба с миганием при смене изображения img.src в Firefox

Недавно столкнулся с этой не приятной проблемой! Если подробнее, то проблема заключается в том, что при смене атрибута src тэга img в Firefox происходит мигание и при этом не помогают такие методы как предзагрузка изображений с помощью new Image() и даже не поможет если вы вставите динамически нужную картинку, но поставите ей display: none или height: 0;
Я точно не знаю в каких версиях Firefox есть эта проблема, но знаю точно что она есть в Firefox 50.0.2, на данный момент это последняя версия.
Вероятно, что причина этого мигания заключается в том, что в Firefox очень прожорливый сборщик мусора, который вычищает из памяти все картинки, которые не видны пользователю...
Я проблему решил следующим образом:

newImage = "new_image.jpg";
$('.container img').addClass("to-delete-after-loading");   
$('<img class="new-image" src="' + newImage + '" />').appendTo('.container');

$.preloadImages([newImage], function() {
        $('.to-delete-after-loading').remove();
        $('.top-image img').removeClass('new-image');
});
 
Также нужно будет добавить CSS код для класса to-delete-after-loading


.to-delete-after-loading {
    position: absolute;
    opacity: 0;
} 
 
Как я уже говорил не стоит ставить для класса to-delete-after-loading ни display: none ни height: 0 и скорее всего нельзя visibility: hidden - хотя на может быть можно. Но обязательно поставьте position absolute чтобы не испортить разметку вокруг картинки..
Надеюсь этот способ будет кому-нибудь полезен.
Плагин preloadImages можно найти вот по этой ссылке.

Комментариев нет:

Отправить комментарий

Linux командная строка узнаем оставшееся место

Чтобы посмотреть общую картину того, сколько места осталось в системе можно выполнить команду: df -h Чтобы вывести на экран сколько мес...