Lazyload своими руками

Блог им. dex-
Перед редактированием файлов сделайте backup! ВСЕ МАНИПУЛЯЦИИ ВЫ ДЕЛАЕТЕ НА СВОЙ СТРАХ И РИСК! И сразу говорю, что данный скрипт работает не на всех шаблонах. Допустим, на шаблоне maxone не будет работать корректно (там js косячит). А вот на synio прекрасно будет работать.

Ссылка на jquery.lazyload.min.js — yadi.sk/d/yPmxPIrznDBsb

  1. Кидаем jquery.lazyload.min.js в папку /templates/skin/synio/js/;
  2. Открываем header.tpl и в нем добавляем строку 
    <script src="{cfg name="path.static.skin"}/js/jquery.lazyload.min.js" type="text/javascript"></script>
  3. Открываем footer.tpl и добавляем 
      <script type="text/javascript">
		$("#content img").each(function() {
		$(this).addClass('lazy');
		$(this).attr('data-original', $(this).attr('src'));
		$(this).removeAttr("src");
		})
		$("img.lazy").lazyload({
			effect : "fadeIn"
		});
  </script>
    4. А как получить размеры изображения?Если есть вопросы, пишите в комментарии, рассмотрим вместе :)

4 комментария

avatar
В какой-то из предыдущих версий достаточно было в js шаблона прописать (без «лазания» в движок)?
$(function() {
    $("#content img").lazyload();
});
Т.е. без использования data-original.

А скачивать лучше наверное прямо со страницы автора
avatar
Хотя и в последней версии решаемо:
$("#content img").each(function() {
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
    $(this).removeAttr("src");
}
$("img.lazy").lazyload();
avatar
Вы правы :)
$("#content img").each(function() {
		$(this).addClass('lazy');
		$(this).attr('data-original', $(this).attr('src'));
		$(this).removeAttr("src");
		})
		$("img.topic_preview").lazyload({
			effect : "fadeIn"
		});
avatar
не тот код отправил, вот это должно быть:
$("#content img").each(function() {
		$(this).addClass('lazy');
		$(this).attr('data-original', $(this).attr('src'));
		$(this).removeAttr("src");
		})
		$("img.lazy").lazyload({
			effect : "fadeIn"
		});
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.