Добавить data-src в addriction к src ко всем моим изображениям, чтобы улучшить функцию отложенной загрузки в среде WordPress

Question

Моя проблема в том, что я хочу внедрить систему ленивой загрузки на своем веб-сайте.

Я использую фреймворк, называемый 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 (или папки с плагинами), поэтому я не мог позвонитьих таким образом.Спасибо

Answer 1

Вы можете сделать это с помощью Javascript / jQuery следующим образом:

$('img').each(function() {
    var datasrc = $(this).attr("src");
    $(this).attr("datasrc", datasrc);
});

Убедитесь, что вы загружаете скрипт в заголовок, чтобы он блокировал отображение, чтобы ваша страница не загружалась до тех пор, пока скрипт не был загружен.