A

AlexProfit

+2
Репутация
0
Рейтинг
#1 Повысить скорость загрузки сайта 14 февраля 2020 в 16:30
Итоги!!!
Благодаря
@chameleon9

Как фотографии подгружать lazy load

И так, как сделать ленивую загрузку картинок. Актуально для сайтов, где много фоток хорошего качества.


1. Скачиваем файл jquery.lazyload.js и копируем его в /includes/jquery/
2. далее в /components/content/frontend.php перед строкой 241 вставляем код

  1.  
  2.  
  3. preg_match_all('/<img (.*?)>/', $article['content'], $images);
  4.  
  5. if(!is_null($images)){
  6. foreach($images[1] as $index => $value){
  7. preg_match('#src="(.+?)"#is',$value,$scr);
  8.  
  9. $new_img = str_replace('src=', 'class="lazy" data-original="'.$scr[1].'" src=', $images[0][$index]);
  10. $article['content'] = str_replace($images[0][$index], $new_img, $article['content']);
  11. }}
  12.  
  13.  
Если делать только для статей, лучше добавить только в конце файла \templates\твой шаблон\components\com_content_read.tpl код

  1.  
  2. {literal}
  3. <script src="/includes/jquery/jquery.lazyload.js"></script>
  4. <script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script>
  5. {/literal}
  6.  
Если делать для всего сайта
Подключаем скрипт в файл \templates\твой шаблон\template.php В самом конце, перед </body></html>

  1.  
  2. <script src="/includes/jquery/jquery.lazyload.js"></script>
  3. <script type="text/javascript">$("img.lazy").lazyload({effect : "fadeIn"});</script>
  4.  
#2 Повысить скорость загрузки сайта 14 февраля 2020 в 16:16



Полистал сейчас твои статьи, у тебя по одной — две картинки на странице, такой код эффективен когда в статье сотня фотографий хорошего качества.
Смотри сам, можешь оставить.
Может кому нибудь еще пригодится.

@AlexProfit

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

Еще раз благодарю за уделенное время.

@chameleon9
#3 Повысить скорость загрузки сайта 14 февраля 2020 в 15:53


попробуй в \components\content\frontend.php
перед строкой 241

@chameleon9

Сделал. Все работает:
код картинки меняется на lazy
картинки подгружаются!!!

Огромное спасибо!
Благодаря вам немного стал понимать хоть как оно работает)).

А что вы имели ввиду по поводу других элементов?
#4 Повысить скорость загрузки сайта 13 февраля 2020 в 23:17



@AlexProfit

попробуй заменить на
  1.  
  2. preg_match_all('//', $article['content'], $images);
  3. if(!is_null($images)){
  4. foreach($images[1] as $index => $value){
  5. $new_img = str_replace('src=', 'class="lazy" data-original=', $images[0][$index]);
  6. if(!preg_match('/alt=/', $value) || preg_match('/alt=""/', $value)){
  7. $new_img = str_replace('
  8.  

@chameleon9

Что заменять?)) я еще не таксилен в этом
#5 Повысить скорость загрузки сайта 13 февраля 2020 в 23:15


переименовывать ничего не нужно, сам файл jquery.lazyload.js копируете в /includes/jquery/

abasia

Сделал.


далее
в /components/content/frontend.php
примерно после строки 204
$article['image'] = (file_exists(PATH.'/images/photos/medium/article'.$article['id'].'.jpg')? 'article'.$article['id'].'.jpg': '');
добавить строчку
$article['content'] = str_replace('


Сделал.

Код картиник изменен.
Скрипт подгружается

Но вместо фото квадраты.
#8 Повысить скорость загрузки сайта 13 февраля 2020 в 22:45


@chameleon9

Код картинки меняется, но файл лэзилоадер в списке не появляется. Так понимаю не подгружается
#9 Повысить скорость загрузки сайта 13 февраля 2020 в 22:39


1. скачай файл (постом выше) и скопируй в папку
/includes/jquery/

@chameleon9

Скачал и переименовал в jquery.lazyload.js и поместил в соотвествующую папку


2. \components\content\frontend.php
перед строкой 241 // Выполняем фильтры

  1. $article['content'] = str_replace('
  2.  


Сделал именно в строку 241.

Результаты:
1. Код картинки изменился на класс lazy но
2. Картинки не подгружаются (квадраты)

В файле template.php куда вставлять код?
#10 Повысить скорость загрузки сайта 13 февраля 2020 в 22:30


@chameleon9
Все сделал, что-то с файлом jquery.lazyload.js (я его скачал как jquery.js и переименовал)
При попытки его открыть в Нотпаде (на сервере) пишит
Прикрепленный файл
_nfghu.png 22 Кб
#13 Повысить скорость загрузки сайта 13 февраля 2020 в 21:31


в .htaccess добавь

@chameleon9

Добавил. Файлы, которые в template.php подключаются,
css/reset.css');
/css/text.css');
'/css/960.css');
/css/styles.css');
// Подключаем colorbox (просмотр фото)
'includes/jquery/colorbox/jquery.colorbox.js');
'includes/jquery/colorbox/colorbox.css');
includes/jquery/colorbox/init_colorbox.js');


заархивировал и залил в папки оригиналов. Файлы-оригиналы оставил на месте.
Скорость на Моб увеличилась до 60 (была 54), на Пк до 82-85.(была ниже 80)


2. Фотографии можно подгружать lazy load


Это как реализовать?

И еще вопрос.
До этого вставлял этот код:


<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/css
<IfModule mod_setenvif.c>
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
</IfModule>

<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
Его можно оставить или надо убрать?
#14 Повысить скорость загрузки сайта 13 февраля 2020 в 20:14


Если что, могу подсказать как еще ускорить.

@chameleon9

Подскажите. Принимаю с благодарностью.
Зеленая цифра 100 радует как-бы там ни было)
#15 Повысить скорость загрузки сайта 13 февраля 2020 в 19:55


Для обработки картинок, хорошо подходит XnView

@chameleon9

Благодарю за программу!


Уже год жду толп посетителей laugh


Прекрасно понимаю)), что скорость загрузки не приведет посетителей))...
Но один из факторов, который влияет на % отказа… мне так кажется)..

Да и в сейчас все хотят все быстро)))
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.