отложенная загрузка без плагинов

Решено tstas
(@tstas)

5 лет, 4 месяца назад
Здравствуйте!
Пытаюсь реализовать отложенную загрузку изображений без плагинов, на тестовом сайте wordpress. Сделал следующее:
Поставил jquery.min.js в хейдер в первую очередь, далее скрипт отложенной загрузки jquery.lazyload.min.js
Разместил маленький скрипт в футуре на инициализацию.
В функционал темы добавил следующее:
```
// Атрибуты для изображений внутри поста

function rudr_custom_html_template($html, $id, $caption, $title, $align, $url, $size, $alt) {

$loader = plugins_url('/loading-rect.gif', __FILE__);

list( $img_src, $width, $height ) = image_downsize($id, $size);
$hwstring = image_hwstring($width, $height);

$image_thumb = wp_get_attachment_image_src( $id, $size );

if($url){ // if user wants to print the link with image
$out .= '<a href="' . $url . '">';
}
$out .= '<img data-original="'. $image_thumb[0] .'" src="'.$loader.'" alt="'.$alt.'" title="'.$title.'" '.$hwstring.' class="align'.$align.' size-'.$size.' wp-image-'.$id.' lazy"/>';
if($url){
$out .= '</a>';
}
return $out; // the result HTML
}

add_filter('image_send_to_editor', 'rudr_custom_html_template', 1, 8);
```
Впринципе работает, но кривовато, не выводит с отложкой адаптивные изображения.
Если кто знает, подскажите, как вставить в код функцию wp_get_attachment_image_srcset()
чтоб срабатывало на изображениях с адаптивной версткой.
Заранее спасибо.

Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 15 ответов — с 1 по 15 (всего 20)

1 2 →

tuxfighter
(@tuxfighter)

5 лет, 4 месяца назад

Пытаюсь реализовать отложенную загрузку изображений без плагинов,

скажите, в какой секте нужно для этого состоять?
где так жестоко глумятся над своими последователями?

Автор tstas
(@tstas)

5 лет, 4 месяца назад

Прикольно!
Но суть вопроса не решает!

tuxfighter
(@tuxfighter)

5 лет, 4 месяца назад

ну почему? возможно мы поможем вам сбежать от этих людей и суть вопроса мгновенно решится, использованием соответствующего плагина?

Модератор Yuri
(@yube)

5 лет, 4 месяца назад

Возьмите любой плагин, хорошо выполняющий поставленную задачу, и перенесите его код целиком в свою Тему. Если очень хочется без плагинов.

Только плагин, если он не из экзотических, все равно лучше хотя бы тем, что в его улучшении участвует довольно много людей.

Автор tstas
(@tstas)

5 лет, 4 месяца назад

Плагин, конечно это вариант, но самый крайний. Понятно, что есть 3 — 5 мощных и всем известных, перечислять не буду. Но все они грузят сайт и сервер, тормозят загрузку. По опыту могу сказать, что раньше на все использовал плагины, а сейчас все стараюсь решить без них, и загрузку значительно ускорил. В общем сократил до минимума, так к примеру «контакт 7 форм» выкинул и решил простым легким кодом, который грузится только на одной странице, а не на каждой, в отличии от плагина!
Карта сайта, также реализована без плагина, xml карта тоже.
Подумываю, как убрать All In One SEO Pack, никакого сео он не дает, и никогда не давал, просто удобство в оформлении статьи, которое можно решить простым кодом PHP.
Спасибо Юрий! Но то что Вы предложили в плане переноса кода плагина в тему, это не возможно (очень кривое решение). У нормального плагина очень мощный и объемный функционал.
Спасибо за ответы, может кому то попадалась нормальный мануал на эту тему.

tuxfighter
(@tuxfighter)

5 лет, 4 месяца назад

Но все они грузят сайт и сервер, тормозят загрузку.

Вы искрене верите, что сделаное вами на колене поделие будет меньше грузить сайт, чем плагин, который делали профессионалы?

а сейчас все стараюсь решить без них,

и свой код в дальнейшем вы так же будете поддерживать, постоянно обновлять?

Vova Druzhaev
(@otshelnik-fm)

5 лет, 4 месяца назад

Есть станок с чпу, есть шуруповёрт, а есть отвертка. Второй — самый удобный в плане скорости, минимальной нагрузки на тело и мозг. И место занимает оптимально.

Всегда надо думать какие инструменты и для чего применять по ситуации.

Вы в ответ даёте названия «станков» (cf7, aiosp). Но сами в начале топика хотите решить простой вопрос. Для вашего простого вопроса есть простые плагины — те самые «шуруповёрты». Но вы почему-то хотите использовать «отвертку».

Автор tstas
(@tstas)

5 лет, 4 месяца назад

tuxfighter и Otshelnik-Fm!

Вы искрене верите, что сделаное вами на колене поделие будет меньше грузить сайт, чем плагин, который делали профессионалы?

ДА я не только искренне верю, я просто знаю!
Убрал плагин cf7, поставил простой PHP код в пару строк и сайт значительно ускорился в загрузке.
Все элементарно просто — cf7 имеет очень большой и ненужный функционал, грузящий каждую страницу сайта, когда, как форма обратной связи расположена всего на одной странице. Убрав плагин и разместив пару строк кода, только на нужной (ОДНОЙ) странице, не влияющего вообще на скорость загрузки, получаю увеличение скорости на всем сайте и рабочую форму. Тоже самое и с картами сайта.
Таким же образом хочу решить и с отложенной загрузкой изображений.

и свой код в дальнейшем вы так же будете поддерживать, постоянно обновлять?

И да! Естественно за своими проектами я слежу ежедневно и по мере необходимости обновляю!

Для вашего простого вопроса есть простые плагины — те самые «шуруповёрты».

Otshelnik-Fm — если можете порекомендовать легкий плагин, а лучше подробный мануал по установке скрипта и доп. функционала в теме для отложенной загрузки буду признателен.
Только не надо кидать всем известные и упомянутые выше, монстров, типа
BJ Lazy Load
a3 Lazy Load
Rocket Lazy Load
Заранее всем спасибо.

SeVlad
(@sevlad)

5 лет, 4 месяца назад

оставил простой PHP код в пару строк и сайт значительно ускорился в загрузке.

Когда через эти «пару строк» начнут рассылать спам (в лучшем случае) тогда увидите насколько всё станет быстрее.
Не Вы первый, не Вы последний кто думает что самый умный и «обманул систему». Потом они создают топики — то «взломали», то «ВП глючит» и тп.

Все элементарно просто — cf7 имеет очень большой и ненужный функционал, грузящий каждую страницу сайта, когда, как форма обратной связи расположена всего на одной странице.

Если правильно использовать плагин (т.е. почитать документацию и настроить), то ничего этого нет.

Модератор Yui
(@fierevere)

永子

5 лет, 4 месяца назад

Только не надо кидать всем известные и упомянутые выше, монстров, типа
BJ Lazy Load
a3 Lazy Load
Rocket Lazy Load

т.е. Jetpack можно ? )

Автор tstas
(@tstas)

5 лет, 4 месяца назад

Очевидно ответа здесь не будет

tuxfighter
(@tuxfighter)

5 лет, 4 месяца назад

cf7 имеет очень большой и ненужный функционал,

именно по этому я его никогда не использую, а беру более простые плагины обратной формы связи.
Или вы искрене верите, что это единственный плагин в таком роде???

И да! Естественно за своими проектами я слежу ежедневно и по мере необходимости обновляю!

Почему бы ЭТО не оформить в виде плагина, и не выставить в общий репозитарий?

Очевидно ответа здесь не будет

здесь не приветствуют людей, которые не видят простых путей и упрямо прут лбом на ворота

SeVlad
(@sevlad)

5 лет, 4 месяца назад

Очевидно ответа здесь не будет

Вам Юрий написал уже давно.
#Выжепрограмиист.

Vova Druzhaev
(@otshelnik-fm)

5 лет, 4 месяца назад

Хоть тема и решена напишу что и я решал подобный вопрос кастомным кодом. в 2009м году.
Все работало. Файл functions.php рос, росла версия php, mysql, wordpress.
Браузеры совершенствовались. В итоге я зарылся.
Любое из изменений и крах. Где концы — понять сложно. Тема и такие миниплагины внутри нее сплелись в клубок. Сайтом я не занимался пару-тройку лет. Когда прокачал скиллы — вернулся к нему… выпил… Рефакторить его было не рентабельно. Понять что я там за лапшу накидал — убийство времени. Обновить — обновил всё и рухнул сайт. Откатил из бекапа, вернул старое П.О. Так сайт провисел еще 2 года. Потом я закрыл его.

Что из этого вынес: отдельная фича — отдельный плагин. Никаких functions.php

Стили все в одном стилевом файле — зло. Браузеры меняются — стили тоже. Вендорные префиксы, флексы, флоаты! В верстке класс исчез/сменился — в стилях старый забылся, новый добавился. такая каша. Селекторы названы тоже чер пойми как — не найти концов. Много зомби css.

js… Там кто кем не погонял. Я не смог понять как этот вызов работает — гдеж основная библиотека то? А знаете где? Прям в нужной мне записи. Внутри. Зато оптимизировал и грузил только там где надо.

Стыдно ли мне за это сейчас? Нет. Поэтому я и пишу это. Это хороший урок. Если бы раньше мне примерно так как я вам написал — так бы сказали и настояли и привели примеры — яб послушал. Но инет завален «функционал без плагина» и это новичкам палка в колёса. Я стараюсь таким авторам (ну если сайт авторитетный) писать комментарии чтоб не учили новичков плохому.

Код должен быть в отдельном плагине. Стиль должен быть только для него. Скрипты тоже. У плагина должен быть гит или svn — история важна. Желательно чтобы этот плагин лежал в открытом месте — гитхаб или репозиторий ВП. Тогда есть шанс что сторонние юзеры помогут вам — сообщат о проблемах (пока конечно же своих) — но ведь она может и вас коснуться. Невозможно контролировать свой код 24 часа в сутки. Опенсурс этим и хорош. Улучшить и контрибьютить то они врядли будут, но проблемные места подскажут.

На выходе много получится отдельных стилей и скриптов? Всегда есть плагины для этого — объединяйте и сжимайте. Но контролируя.

Спустя время могут быть проблемы с сайтом — мы отключаем ВСЕ свои плагины. Тема чиста. Проблема ушла. Включаем по одному — и вот он виновник. Вот его код, вот его js, css. Все в одной коробке. Починить такое не составляет труда — вы же его сами писали. Просто надо подрихтовать, а может пришло время и переписать его — вы же выросли как разработчик. Это просто модуль, а не запутанный клубок.

Удачи вам в разработке.

Модератор Yuri
(@yube)

5 лет, 4 месяца назад

Первый раз я пожалел, что тут нет кнопки «Like».