Напишу на примере картинок товаров выводящихся в категории как я делал. В других местах делается аналогично.
Сначала скачиваете скрипт
Для просмотра ссылки Войди или Зарегистрируйся
Из архива берете только один файл jquery.lazyload.min.js и кидаете его в папку:
/templates/НазваниеВашегоДжумлашаблона/js/
Потом в файле index.php вашего шаблона в самом верху где скрипты подключаются добавьте строку:
$doc->addScript($this->baseurl . '/templates/' . $this->template . '/js/jquery.lazyload.min.js'); (Важный момент - Jquery должен быть подключен выше этой строки)
и еще в <head>
ниже <jdoc:include type="head" /> добавьте строку:
<script type="text/javascript" charset="utf-8">$(function(){$("img.lazy").lazyload({effect:"fadeIn"})});</script>
Теперь в файле /components/com_jshopping/templates/default/list_products/product.php
заменяете:
<a href="<?php print $product->product_link?>">
<img class="jshop_img" src="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" title="<?php print htmlspecialchars($product->name);?>" />
</a>
на:
<a href="<?php print $product->product_link?>">
<img class="lazy" src="/components/com_jshopping/images/loading.gif" data-original="<?php print $product->image?>" alt="<?php print htmlspecialchars($product->name);?>" title="<?php print htmlspecialchars($product->name);?>" />
</a>
И не забудьте закинуть какую-нибудь гифку loading.gif по тому пути.
