#javascript #wordpress #lazy-loading
#javascript #wordpress #отложенная загрузка
Вопрос:
Моя проблема в том, что я хочу внедрить систему отложенной загрузки на своем веб-сайте.
Я использую фреймворк под названием unveil.js но проблема в том, что для этого требуется, чтобы data-src добавлялся в src к каждому изображению.
Итак, по сути, мне нужно добавить к каждому изображению дубликат атрибута src (например, src=»image1.jpg «) и оберните его внутри data-src.
Что-то вроде этого:
$('img').each(function() {
var datasrc = this.attr("src");
//somthing else to add the data-src
});
Для меня это что-то продвинутое, но я хочу реализовать этот скрипт на своем веб-сайте. Я попробовал пару плагинов, но они не делают того, что я ищу, потому что, по сути, моя проблема в том, что все мои изображения находятся за пределами папки темы на WordPress (или папки плагинов), поэтому я не мог вызвать их таким образом. Спасибо
Комментарии:
1. К тому времени, когда вы меняете атрибут src на data-src, некоторые или все ваши изображения, возможно, уже загружены, что противоречит всем причинам для реализации отложенной загрузки в первую очередь. Это определенно задача для серверной части!
2. вероятно, вы правы..
3. Он мог бы сделать это с помощью javascript и загрузить блокировку рендеринга, чтобы страница не загружалась, пока не будет загружен JS?
4. вы имеете в виду onload?
5. JavaScript в заголовке сайта WordPress известен как блокировка рендеринга, поэтому он загружается раньше остальной части страницы
Ответ №1:
Вы можете сделать это с помощью Javascript / jQuery следующим образом:
$('img').each(function() {
var datasrc = $(this).attr("src");
$(this).attr("datasrc", datasrc);
});
Убедитесь, что вы загрузили скрипт в head, чтобы он блокировал рендеринг, чтобы ваша страница не загружалась до тех пор, пока скрипт не будет загружен.