使用 ajax 或 jquery 加载相册图片

Question

我想优化我的网站，我正在使用 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>

Answer 1

https://github.com/verlok/lazyload 它可能对你有帮助。或者您可以使用此 javascript 函数来加载图像。

var image = new Image();
    image.onload = function(){
      //after load
    };
    image.src = new_img;

使用 ajax 或 jquery 加载相册图片

Load album images with ajax or jquery

javascript

php

jquery

jquery-isotope

imagesloaded