用較大的圖像替換較小的圖像（在較大圖像加載後）

我有幾張超級英雄的圖像。這些都與天文物體的更大的圖像一起呈現。這些較大的圖像需要一段時間才能加載。我希望天文圖像在加載後替換超級英雄圖像。用較大的圖像替換較小的圖像（在較大圖像加載後）

這是我到目前爲止有：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中有更簡單的方法嗎？

來源

2016-02-13 vmpfc1

延遲加載 - https://css-tricks.com/snippets/javascript/lazy-loading-images/ – CodeRomeos

編輯答案，以反映變化：

<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>

然後你就可以通過具有rel屬性的所有圖像有jQuery的循環。 2或2000張圖片，沒關係。

$('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/

來源

2016-02-13 09:31:55 Err

感謝一大堆！由於原因，我需要的結構是像背景圖像的div在這個小提琴的HTML：https://jsfiddle.net/vmpfc1/83zLumuk/2/ 你知道如何讓js在這種情況下工作？ – vmpfc1

用較大的圖像替換較小的圖像（在較大圖像加載後）

回答

相關問題