javascript — загрузка изображений альбома с помощью ajax или jquery
Я хочу оптимизировать свой веб-сайт, я использую framework-y, в частности, использую меню альбомов с изотопным плагином http://templates.framework-y.com/gourmet/pages/menu-albums.html Дело в том, что в каждом альбоме много элементов (около 60), поэтому загрузка каждого изображения при загрузке страницы занимает около 10 секунд. Есть ли способ загрузить каждый альбом только при нажатии? может через ajax или jquery? поэтому страница загружается быстрее и не загружает то, что пользователь не хочет видеть
Я пишу альбомы с запросом и php cicle
каждый пункт в меню выглядит так:
<div class="grid-item col-md-4 subcat-'.$subcategory['id_subcategory'].' row-20">
<div class="advs-box advs-box-multiple boxed-inverse extra-content-cnt" data-anima="scale-rotate" data-trigger="hover">
<a class="img-box lightbox i-center" href="'.$picture.'">
<img class="anima" src="'.$picture.'" alt="" />
</a>
<div class="circle anima-rotate-20 anima">$'.number_format($data['precio']).'<span>'.$data['quantity'].' '.$datos['units'].'</span></div>
<div class="advs-box-content">
<h3>'.$data['name'].'</h3>
<span class="extra-content">'.$data['includes'].'</span>
<p>'.$data['description'].'</p>
</div>
</div>
</div>
Решение
https://github.com/verlok/lazyload
Это может помочь вам.
Или вы можете использовать эту функцию JavaScript для загрузки изображения.
var image = new Image();
image.onload = function(){
//after load
};
image.src = new_img;
Другие решения
Других решений пока нет …