jquery - jQuery。预加载 src 在另一个图像的数据属性中的图像

Question

我需要能够预加载存储在 img 标签的数据属性中的图像

   <div id="slider" class="nivoSlider">
      <a href="#"><img src="http://domain.com/wp-content/themes/xx/images/heros/1-Image.jpg" data-overlay1="http://domain.com/wp-content/themes/xx/images/heros/1-Blog.png" data-overlay2="http://domain.com/wp-content/themes/xx/images/heros/1-anotherimage.png" /></a>

    <a href="#"><img src="http://domain.com/wp-content/themes/xx/images/heros/2-Image.jpg" data-overlay1="http://domain.com/wp-content/themes/xx/images/heros/2-Blog.png" data-overlay2="http://domain.com/wp-content/themes/xx/images/heros/2-anotherimage.png" /></a>
   </div>

基本上我需要在 data-overlay1 和 data-overlay2 中预加载图像。

我该怎么做？

Answer 1

您可以像这样找到这些 URL 并预加载它们：

var preloadImgs = [];
$(document).ready(function() {
    $("#slider img").each(function() {
        var img = new Image();
        img.src = $(this).data("overlay1");
        preloadImgs.push(img);
        img = new Image();
        img.src = $(this).data("overlay2");
        preloadImgs.push(img);
    });
});

Answer 2

$('#slider img').each(function(index, element) {
    $('<img/>')[0].src = $(element).attr('data-overlay1');
    $('<img/>')[0].src = $(element).attr('data-overlay2');
});