使用 jquery 预加载动态加载的图像

Question

这些图片是动态加载的：

<div id="gallery-images" class="gallery-control">
    <ul>
        <img class="galleryImgs" data-src="images/test-image-1.jpg" src="images/test-image-1-s.jpg" />
        <img class="galleryImgs" data-src="images/test-image-2.jpg" src="images/test-image-2-s.jpg" />
        <img class="galleryImgs" data-src="images/test-image-3.jpg" src="images/test-image-3-s.jpg" />      
    </ul>
</div>

我正在尝试从每个 img 标签的“data-src”属性中预加载图像 URL。这是我写的代码：

$('.galleryImgs').each(function(){
    $('<img/>')[0].src = $(this).attr("data-src");
});

目前无法运行动态脚本，因此图像标签当前是静态的。这段代码看起来应该可以工作还是我遗漏了什么？

Answer 1

我用我最初评论的想法做了一个快速的 sn-p，它应该可以跨域工作：

$(function() {
    //creates an imgcacher hidden element
    $('<div/>', {id: 'imgcacher', style: 'display:none;'}).appendTo('body');
    var cacher = $('#imgcacher'); //caches the cacher selector

    //appends the images to the DOM for caching
    $('.galleryImgs').each(function(){
        $('<img/>', {src: $(this).data('src'), class: "precachedImg"}).appendTo(cacher);
    });

    //clean up the DOM after the images are fully loaded and cached
    $('.precachedImg').promise().done(function() {
        cacher.remove();
    });
});​

DEMO
请注意，如果您的连接速度不够快，第二张图片可能会稍大，无法在 5 秒内加载，但它应该至少部分加载。

$.get 在我测试时无法在 Chrome 上缓存图像，因此上述解决方案是我的首选。它适用于我以任何连接速度和文件大小测试过的所有浏览器。现代浏览器只会请求一次图像资源，并与页面中的所有其他重复项并行显示，而不会像 ajax 请求那样生成额外的请求。

此外，它还是一个动态、可扩展且简洁的解决方案。但是，如果您更喜欢简单，它具有“相同”的最终用户体验，而不是最初将带有 display:none 的图像添加到 DOM。显然这会不必要地弄乱 DOM，因此我会选择上面的 sn-p。

另外，这里有一个稍微简化的版本：

$(function() {
    //appends the images to the DOM for caching
    $('.galleryImgs').each(function(){
        $('<img/>', {src: $(this).data('src'), class: 'precachedImg', style: 'display:none;'}).appendTo('body');
    });

    //clean up the DOM as the images are loaded and cached
    $('.precachedImg').load(function() {
        $(this).remove();
    });
});

Fiddle