如何加速 jQuery 图片库

How to speed up a jQuery image gallery?

本文关键字：jQuery 图片库 加速 何加速      更新时间：2023-09-26

我正在处理一个网页，我正在尝试加快在图库中加载图像所需的时间。您可以在此处查看图库：

www.imagethrow.com/design-studio-all-throws.html

这是库的 HTML 部分：

<a class="imgLink" href="path-to-the-image.jpg">Image name</a>
<img src="" id="theImage">

j查询：

<script>
$(document).ready(function(){
    $('.imgLink').click(function(){
        var imgPath = $(this).attr('href');
        $('#theImage').attr('src',imgPath);
        return false;
    });
});

图像已经过优化/压缩，我已经实现了缓存控制设置。如有任何建议，我将不胜感激。

谢谢

Jpg 而不是 Png

使用 Jpg 图像而不是 Png。像 http://www.imagethrow.com/img/design-studio/2.5_Layer_Throw/Little_Caesars.png 这样的图片可以很容易地从 380KB 恢复到大约 100 KB，如果你把它保存为高质量 （80） Jpg。

请注意，Jpg 不支持透明度，因此您必须将图片中的透明边缘设置为白色。

此外，Jpg是有损的，这意味着在保存图片时会丢失少量细节。不过，这几乎不值得注意，尤其是对于图片。此外，您可以尝试并选择文件大小和质量之间的最佳平衡。

网络P

如果这还不够，您可以尝试 WebP，这是 Google 的一种全新的图像格式，但显然目前并非所有浏览器都支持它，所以我认为您不应该开始使用它，或者只是作为最后的手段和适当的后备。

预加载

除此之外，您还可以预加载图像。这意味着您开始在后台加载所有图像。但是，我不会推荐它用于这样的画廊。用户可能不会打开每个图像，预加载会占用大量带宽。特别是对于使用有限（移动）数据计划的用户，如果您在后台下载数兆字节的图像，当他们甚至不想看到所有图像时，这不是很好。

您可以通过预加载来改进它。您可以选择全部预加载它们，也可以在用户将鼠标悬停在链接上时预加载它们。

$(document).ready(function(){
    $('.imgLink').click(function(){
        var imgPath = $(this).attr('href');
        $('#theImage').attr('src',imgPath);
        return false;
    }).one("mouseenter",function(){
        var img = createElement("img");
        img.src = $(this).attr('href');
    });
});

如果您可以在用户将鼠标悬停在链接附近时让它开始预加载，而不是等到他们实际悬停在链接本身上，那就更好了。

相关文章：