Question

在我的网页中，有些图片需要花费大量时间才能在IE中加载。所以我用这个来预加载我页面中的图片。但问题仍然存在。有什么建议吗？

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
    alert("Done Preloading...");
}

// Usage:

preload([
    '/images/UI_1.gif',
    '/images/UI_2.gif',
    '/images/UI_3.gif',
    '/images/UI_4.gif',
    '/images/UI_5gif',
    '/images/UI_6.gif',
    '/images/UI_7.gif',
    '/images/UI_8.gif',
    '/images/UI_9.gif'
]);

＆LT;

DIV＆GT;

Answer 1

// Create an image element
var image1 = $('<img />').attr('src', 'imageURL.jpg');

// Insert preloaded image into the DOM tree
$('.profile').append(image1);
// OR
image1.appendTo('.profile');

但最好的方法是使用回调函数，因此它在完成加载时将预加载的图像插入到应用程序中。要实现这一点，只需使用.load（）jQuery事件。

// Insert preloaded image after it finishes loading
$('<img />')
    .attr('src', 'imageURL.jpg')
    .load(function(){
        $('.profile').append( $(this) );
        // Your other custom code
    });

更新＃1

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(index){
        $('<img />')
        .attr('src', arrayOfImages[index])
        .load(function(){
            $('div').append( $(this) );
            // Your other custom code
        });
    });
    alert("Done Preloading...");
}

// Usage:

preload([
    '/images/UI_1.gif',
    '/images/UI_2.gif',
    '/images/UI_3.gif',
    '/images/UI_4.gif',
    '/images/UI_5gif',
    '/images/UI_6.gif',
    '/images/UI_7.gif',
    '/images/UI_8.gif',
    '/images/UI_9.gif'
]);

Answer 2

试试这个jQuery插件：http://farinspace.com/jquery-image-preload-plugin/

它允许您使用选择器抓取img元素并让它们预加载它们。我不确定您要预加载的图像是否已经在HTML中，如果它们可能您对此插件感兴趣，因为它允许您这样做：

$('#content img').imgpreload(function()
{
    // this = jQuery image object selection
    // callback executes when all images are loaded
});

虽然仍然允许您手动预加载带文件名的图像：

$.imgpreload('/images/a.gif',function()
{
    // this = new image object
    // callback
});

Answer 3

图像精灵可以极大地提高速度（但请确保使用ImageOptim之类的东西压缩它们）。接下来，将您的所有图像托管在某个CDN上（我建议使用Amazon S3 / CloudFront）。最后，使用下面的内容预加载所有图像，并尝试尽早调用它。希望这有帮助！

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);
    });
}

使用jquery预加载图像

3 个答案: