Можно ли как-то анимировать ленивую загрузку изображений - loading="lazy" в WordPress?

12 3
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
403

Всем привет!

В WordPress по дефолту есть ленивая загрузка изображений, а можно ли её как-то по-простецки анимировать чтобы изображение не бах и появилось, а как-то плавненько, может через transition свойства или ещё как ни будь, но, чтобы это просто сделать.

Заранее спасибо за ответы!


W1
На сайте с 22.01.2021
Offline
304
#1
Dmitriy_2014 :
через transition свойства или ещё как ни будь, но, чтобы это просто сделать.

Просто не сделаешь.

Мой форум - https://webinfo.guru –Там я всегда на связи
D.iK.iJ
На сайте с 26.05.2013
Offline
228
#2

Картинку крутящуюся на фон задать ))) 

А можно пример любой страницы вордпрессовской с  loading="lazy"? Интересна реализация у них.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
totamon
На сайте с 12.05.2007
Offline
437
#3
Dmitriy_2014 :
можно ли её как-то по-простецки анимировать чтобы изображение не бах и появилось, а как-то плавненько
не знаю про дефолтную, но на всех темах использующих lazy load обычно есть анимация, значит не так уж и трудно ее прикрутить🤔
Домены и хостинг https://8fn.ru/regru | Дедик от 3000р https://8fn.ru/73 | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
W1
На сайте с 22.01.2021
Offline
304
#4
По-видимому, это следует делать через JavaScript, отслеживая момент загрузки каждого изображения.
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#5

Я нашел какой-то код на stackoverflow в виде примера и как я понял просто так там transition свойством не сделаешь, но там в принципе немного кода, чутка jQuery пару строк и чуть css, но как я понял по дефолту он предлагает сделать все картинки полностью прозрачными, что что-то не очень мне нравиться.

jQuery:

//fade in lazy loaded images
$('article img').on('load', function(){
    $(this).addClass('loaded');
});


CSS:

img{
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

img.loaded{
    opacity: 1;
}
W1
На сайте с 22.01.2021
Offline
304
#6
Dmitriy_2014 #:
но как я понял по дефолту он предлагает сделать все картинки полностью прозрачными, что что-то не очень мне нравиться

Либо прозрачными, либо невидимыми, либо и то и другое одновременно. Но нужно это свойство задавать не для всех img,  а только для картинок с атрибутом loading="lazy".
Именно так это и следует делать, как я и написал выше.

A3
На сайте с 22.01.2021
Offline
26
az3
#7
А для чего?
W1
На сайте с 22.01.2021
Offline
304
#8
az3 #:
А для чего?

Например, для того, чтобы не наблюдать половинки картинок. И вообще для красоты.

Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#9
az3 #:
А для чего?
Ну для того чтобы, когда картинки еще подгружаются это, не выглядело так как будто бы, происходят какие-то глюки и лаги на сайте, а хоть как-то сгладить этот эффект, хотя мне эта идеология не нравиться, по мне лучше бы все сразу загрузилось, но тенденции и типа оптимизация.
Dmitriy_2014
На сайте с 01.07.2014
Offline
276
#10
webinfo #:

Либо прозрачными, либо невидимыми, либо и то и другое одновременно. Но нужно это свойство задавать не для всех img,  а только для картинок с атрибутом loading="lazy".
Именно так это и следует делать, как я и написал выше.

Я так понял, что при таком раскладе если троянский JavaScript будет отключен, знаю, знаю, что 99,9% его никогда не отключают, и я знаю только одного параноидного чела и один сайт во всем мире которые отключают js :-), но я так понял, что все мои картинки останутся полностью прозрачными или невидимыми.
12 3

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий