Question

我有一个像这样的JQuery代码：

var number_images = 5;
var ct = 1;

// Goto previous Picture
$('#changeImageMinus').on('click', function()
{
    if(ct-1>=1 && ct-1<=number_images)
    {
        ct = ct - 1;
        $('.container-bg').css("background-image","url('images/" +  ct + ".png')");
    }
})

// Goto next Picture
$('#changeImagePlus').on('click', function()
{
    if(ct+1>=1 && ct+1<=number_images)
    {
        ct = ct + 1;
        $('.container-bg').css("background-image","url('images/" +  ct + ".png')");
    }
})

我在文件夹1.png, 2.png ...中有一个名为images/的图像，因此我只需按“+”或“ - ”按钮即可向后/向前加载图像。问题是加载需要很长时间，我想知道是否有可能将所有图像预加载到缓冲区或类似的东西。我基本上想要在网站打开之前加载所有图像，这样当我切换它时它会更快地显示出来。非常感谢你提前！

Answer 1

您可以使用Image类来完成JS。创建新的Image对象并使用图片路径设置它的src属性。在打印页面之前对所有图像执行此操作，您应该预先加载它们。在这个article 中，他们描述了它（第二种方式）。

要小心，因为如果你有很多图片，它会对用户体验产生负面影响，特别是对于连接速度较慢的用户（是的，他们存在，例如：D）。想象一下，您需要等待几秒钟（如10次或更多）秒才能加载页面。在这种情况下，最好的方法是预加载指定数量的图像，然后在需要时加载其余图像。等待的问题可能会再次发生，但至少用户将看到您的页面，而不是搜索其他一个：）

加载图像更快？（PHP，JQuery）

1 个答案: