локальные hg игнорируют

CSS3 + jQuery Solution

Мне нужно решение, в котором НЕ используется эффект затухания jQuery, поскольку это вызывает задержку во многих мобильных устройствах.

Заимствование из ответа Стива Фентона Я адаптировал версию этого, которая добавляет изображение к нему с помощью свойства перехода CSS3 и непрозрачности. Это также учитывает проблему кэширования в браузере, в этом случае изображение не будет отображаться с использованием CSS.

Вот мой код и рабочая скрипка :

HTML

CSS

.fade-in-on-load {
    opacity: 0;
    will-change: transition;
    transition: opacity .09s ease-out;
}

jQuery Snippet

$(".fade-in-on-load").each(function(){
    if (!this.complete) {
        $(this).bind("load", function () {
            $(this).css('opacity', '1');
        });
    } else {
        $(this).css('opacity', '1');
    }
});

То, что здесь происходит, это изображение (или любой элемент), который вы хотите затемнить, когда оно загружается, должно иметь .fade-in-on-load класс применяется к нему заранее. Это присвоит ему непрозрачность 0 и назначит эффект перехода, вы можете редактировать скорость затухания по вкусу в CSS.

Затем JS будет искать каждый элемент, имеющий класс, и связывать с ним событие загрузки. После этого для непрозрачности будет установлено значение 1, и изображение будет постепенно исчезать. Если изображение уже было сохранено в кэше браузера, оно немедленно исчезнет.

Использование этого для страницы со списком товаров.

Возможно, это не самая красивая реализация, но она работает хорошо.