用较大的图像替换较小的图像(在较大的图像加载后)

时间:2016-02-13 08:10:07

标签: javascript css html5

我有一些超级英雄的照片。这些都是div和更大的天文物体图像。这些较大的图像需要一段时间才能加载。我希望天文图像能够在超级英雄图像加载后取代它们。

到目前为止我所拥有的内容:https://jsfiddle.net/vmpfc1/5typ7pnp/1/

HTML:

<body>
  <div class="image-wrapper">
    <div class="pix"style="background: url('http://baltimorepostexaminer.com/wp-content/uploads/2012/07/spider-man2_pole_4681.jpg'); height:200px;width:200px;">
    </div>
    <div class="true-image" style="background: url('http://m1.i.pbase.com/o9/27/876727/1/151851961.JlvdQ9xW.GreatCarinaKeyholeandRedHoodNebulae3454x2566pixelsimproved3.jpg')"></div>
    </div>

  <div class="image-wrapper">
    <div class="pix"style="background: url('https://upload.wikimedia.org/wikipedia/en/7/75/Comic_Art_-_Batman_by_Jim_Lee_%282002%29.png'); height:200px;width:200px;">
    </div>
    <div class="true-image" style="background:url(' https://www.nasa.gov/sites/default/files/706439main_20121113_m6triptych_0.jpg')"></div>
  </div>

</body>

JS:

setTimeout(function () {
    $('.true-image').attr('style').on('load', function () {
        $('.pix')({
            'background-image': 'url(' + $(this).attr('src') + ')'
        });
    });
}, 0);

的CSS:

.true-image {
    display : none;
}

我是一个javascript新手 - 是否有一种不错的方法可以让更大的空间图像取代超级英雄占位符?

在HTML5中有更简单的方法吗?

1 个答案:

答案 0 :(得分:1)

编辑答案以反映变化:

<div style="background-image: url('https://i.imgur.com/sOcRl3M.jpg'); height:400px;width:400px" rel="https://i.imgur.com/xr7CRQo.jpg">
</div>

<div style="background-image: url('https://i.imgur.com/1m0NwgN.png'); height:400px;width:400px" rel="https://i.imgur.com/nlFPkc4.jpg">
</div>

然后你可以让jQuery遍历所有具有rel属性的图像。 2或2,000张图片,没关系。

$('div[rel]').each(function() {
  var rel = $(this).attr('rel');
  var self = $(this);
  var img = new Image();
  $(img).load(rel, '', function() {
    self.css('background-image', 'url('+rel+')');
  });
});

您可以在此处看到它:https://jsfiddle.net/83zLumuk/4/