在加載後與背景圖像淡入淡出

我想淡入div其中有一個內聯背景圖像。在加載後與背景圖像淡入淡出

我已經在頁面加載的圖片上試過了，但是我們如何才能在div的背景圖片中實現該效果。

來源

2014-02-23 designerNProgrammer

http://stackoverflow.com/questions/6285809/how-can-i-tell-when-a-css-background-image-has-loaded-is-an-event-fired –

no that dosen't回答我的問題。 – designerNProgrammer

有沒有辦法AFAIK檢測何時加載的背景圖像..所以解決方案有利用另一種加載事件技術 –

評論Link here中鏈接問題的第二個答案提供了一個解決方案，可以將背景圖像加載到圖像標記，然後在準備好將圖像注入到div中時。下面是一個例子類似，但不同的：

HTML：

<img src="http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg" id="dummy" style="display:none;" alt="" /> 
<div id="pic" style="height:100px;width:100px;display:none;"></div>

的jQuery：

$('#dummy').ready(function() { 
    $('#pic').css('background-image','url(http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg)'); 
    $('#pic').fadeIn(1000); 
});

隨着這裏實時預覽：Fiddle。

希望這對你更好！

來源

2014-02-23 07:20:36

嘿夥計我需要它在圖像加載後淡入。謝謝。 – designerNProgrammer

@designerNProgrammer良好的通話。我更新了我的答案，以更接近您要查找的內容。 –

我建議還將背景網址放到div上。當你將模板放在一起時，你很可能會這樣做，而JS方法需要一些資源： http://jsfiddle.net/unUc8/8/。我也冒着在加載之後刪除圖像的自由，儘量減少了DOM大小（所有人可能會爭論關於刪除它們的CPU） – Martijn

您可以使用一個名爲waitForImages的jQuery插件，它可以檢測到背景圖片何時下載。

$('selector').waitForImages({ 
    finished:function(){$(this).slideUp();}, 
    waitForAll:true 
});

來源

2014-02-23 07:40:55

我在談論背景圖像DIV。 – designerNProgrammer

我更新了我的答案 –

該代碼不會在意背景圖片。你需要仔細閱讀項目的文檔。 – alex

-1

你能試試嗎？

HTML

<div id="mg" style="background-image:url(http://lorempixel.com/1920/1920/); display:none; width:1920px; height:1920px;"></div>

var elem = $('#mg'), 
    bgImg = elem.css('background-image'), 
    imgUrl = bgImg.indexOf('"')!=-1 ? 
      bgImg.replace('url("','').replace('")','') : 
      bgImg.replace('url(','').replace(')',''), 

    nwImg = new Image(); 
    nwImg.src = imgUrl; 

nwImg.onload = function() { 
    elem.fadeIn('fast'); 
} 

nwImg.onerror = function() { 
    alert('error'); 
}

的jsfiddle

http://jsfiddle.net/EZg36/8/

如果您錯誤地更改了URL，您將看到錯誤消息（例如：background-image：url（hERRRttp：//lorempixel.com/1920/1920/）;）

來源

2014-02-23 08:35:40 midstack

只是想知道，爲什麼'mg'，而不是'img'？ – Martijn

@Martijn我不知道，沒有特別的理由:) – midstack

HTML5 Animation會加載畫布上下文允許this and more。

Here是動畫的CSS演示。

來源

2014-03-25 17:47:31 Kraken

在加載後與背景圖像淡入淡出

回答

相關問題