Question

我正在网页上工作，并且我正在努力加快在图库中加载图片所需的时间。您可以在此处查看图库：

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">

jQuery的：

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

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

由于

Answer 1

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也是有损的，这意味着保存图片时会丢失一些细节。但这并不值得注意，尤其不适用于图片。此外，您可以四处游戏并选择文件大小和质量之间的最佳平衡。

<强>的WebP

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

<强>预压

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

Answer 2

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

$(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');
    });
});

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

如何加速jQuery图库？

2 个答案: