如果在jQuery中使用预加载图像？

Question

我为具有五个图像的图像滑块创建了一个脚本，我想在使用滑块之前必须以某种方式预加载图像。当使用它时：$（document）.ready（function（）这样做还包括图像，并且每件事情都准备就绪，或者是否还要检查图像是否也被加载了？

Answer 1

这取决于。 触发ready事件时，DOM已准备好进行操作。这意味着图像元素已加载，但图像文件可能尚未被提取。

如果您的图像滑块不需要知道图像的尺寸，则不应出现任何问题。如果不是这种情况，您可以改为使用$(window).load(function() { //code } );。

触发此事件时，已加载所有外部资源。

Answer 2

使用下面的内容预加载所有图片，并尝试尽早调用。在完成之前，DOM不应该开火。

function loadImages(){
    var images = [
        'http://cdn.yourdomain.com/img/image1.png',
        'http://cdn.yourdomain.com/img/image2.jpg',
        'http://cdn.yourdomain.com/img/image3.jpg',
        'http://cdn.yourdomain.com/img/image4.jpg'
    ];
    $(images).each(function() {
        var image = $('<img />').attr('src', this);
    });
}