Question

您好我有一个项目，其中一个页面有一个库。这样的事情：

 <div id="gallery" class="sections">
        <img src="Images/Image1.jpg" class="thumbnails">
        <img src="Images/Image2.jpg" class="thumbnails">
        <img src="Images/Image3.jpg" class="thumbnails">
        etc...
 </div>

我想预先加载这些图片，以便在您访问图库页面时它们已经加载。我知道你可以通过使用javascript来做到这一点。有点像：

var myImage = new Image();
myImage1.src = "Images/Image1.jpg";
etc...

我不确定的是下一步。我是否从html中删除了src并添加了一个id，如下所示：

 <div id="gallery" class="sections">
        <img id="image1" class="thumbnails">
        <img id="image2" class="thumbnails">
        <img id="image3" class="thumbnails">
        etc...
 </div>

然后做类似的事情：

$('#image1').append(myImage1);

这没效果......我也试过了：

$('#image1').attr('src','Images/Image1.jpg');

这也没有用。

我浏览了一下，有很多关于如何制作预装图像等功能的教程......但我还没有完成。我现在想知道如何一个接一个地做，然后可能创建一个函数。感谢。

Answer 1

他们有很多功能页面打开时，图像会加载到DOM中，但不可见。然后，当你想要显示它们时（点击，滑块，......），没有加载时间！

kendo.ui.progress($("#grid").data("kendoGrid").element, false);

//将您的功能与所有图像路径一起使用

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

如何使用jQuery预加载图像

1 个答案: