如何驗證背景（css）圖像是否已加載？

我有以下CSS類如何驗證背景（css）圖像是否已加載？

.bg { 
    background-image: url('bg.jpg'); 
    display: none; 
}

說我申請一個TD標記。

我的問題是我怎樣才能告訴JavaScript/jQuery的背景圖像完成加載？

謝謝。

更新：添加顯示屬性。由於我的主要目標是將其切換到視圖中。

來源

2009-12-18 thedp

我知道這樣做的唯一方法是使用Javascript加載圖像，然後將該圖像設置爲背景。

例如：

var bgImg = new Image(); 
bgImg.onload = function(){ 
    myDiv.style.backgroundImage = 'url(' + bgImg.src + ')'; 
}; 
bgImg.src = imageLocation;

來源

2009-12-18 11:22:38

出於某種奇怪的原因在onload只有當imageLocation實際需要一段時間大火加載，就像從網絡。它在加載時間爲0的本地測試中不起作用。 – thedp 2009-12-23 01:07:44

您可以設置'bgImg.src = imageLocation;'的超時時間，但我會假設大多數人不會在您的計算機上：P – 2010-01-02 10:02:16

這實際上有一個錯誤，當'bgImg.src'包含特殊字符單引號和雙引號以及反斜槓。相反，你應該使它成爲''url（「'+ bgImg.src.replace（」\\「，」\\\\「）。replace（'''，'\\'''）+'」）';' 。我認爲這應該逃避任何網址正確。 – 2015-09-10 03:20:45

在初始頁面加載時，將該課程分爲visibility:hidden。這樣，當您將類指定給表格單元格時，它已經在瀏覽器緩存中。

來源

2009-12-18 11:20:45 Gausie

This article may help you。相關部分：

// Once the document is loaded, check to see if the 
// image has loaded. 
$(
    function(){ 
     var jImg = $("img:first"); 

     // Alert the image "complete" flag using the 
     // attr() method as well as the DOM property. 
     alert(
      "attr(): " + 
      jImg.attr("complete") + "\n\n" + 

      ".complete: " + 
      jImg[ 0 ].complete + "\n\n" + 

      "getAttribute(): " + 
      jImg[ 0 ].getAttribute("complete") 
     ); 
    } 
);

基本上選擇背景圖像，並做檢查，看看它的加載。

來源

2009-12-18 11:26:56 AJM

我不認爲這可以在背景的初始狀態顯示時完成：none; – thedp 2009-12-18 19:53:27

@Jamie迪克森 - 他沒有說他想做的事與背景圖像的任何時候它的加載，才知道......

$(function() 
{ 
    var a = new Image; 
    a.onload = function(){ /* do whatever */ }; 
    a.src = $('body').css('background-image'); 
});

來源

2009-12-18 11:56:17

如果我應用背景的元素具有以下屬性，它會工作嗎？display：none; ？ – thedp 2009-12-18 19:52:36

是的，據我所知這並不重要，它只是抓住樣式規則，並強制圖像預加載（基本上），當它完成預加載時激發onLoad事件。但是，如果您想延遲加載大圖像（因爲它可能會減慢速度），您不希望這樣做。 – 2009-12-19 00:30:12

我無法使其工作。這是我的風格：background-image：url（'../ Images/bg/xxx.jpg'）; a。src給我的圖像位置與網址（''）; 看來，onLoad永遠不會被解僱。（我也試過onload） – thedp 2009-12-23 00:21:51

你也可以提供一個功能，只是替換img標籤由div/background，這樣你就可以從onload屬性和div的靈活性中受益。

當然，你可以微調代碼以最適合你的需求，但在我的情況下，我也確保寬度或高度被保留，以更好地控制我所期望的。

我的代碼如下：

<img src="imageToLoad.jpg" onload="imageLoadedTurnItAsDivBackground($(this), true, '')"> 

<style> 
.img-to-div { 
    background-size: contain; 
} 
</style> 

<script> 
// Background Image Loaded 
function imageLoadedTurnItAsDivBackground(tag, preserveHeight, appendHtml) { 

    // Make sure parameters are all ok 
    if (!tag || !tag.length) return; 
    const w = tag.width(); 
    const h = tag.height(); 

    if (!w || !h) return; 

    // Preserve height or width in addition to the image ratio 
    if (preserveHeight) { 
     const r = h/w; 
     tag.css('width', w * r); 
    } 
    else { 
     const r = w/h; 
     tag.css('height', h * r); 
    } 
    const src = tag.attr('src'); 

    // Make the img disappear (one could animate stuff) 
    tag.css('display', 'none'); 

    // Add the div, potentially adding extra HTML inside the div 
    tag.after(` 
     <div class="img-to-div" style="background-image: url(${src}); width: ${w}px; height:${h}px">${appendHtml}</div> 
    `); 

    // Finally remove the original img, turned useless now 
    tag.remove(); 
} 
</script>

來源

2017-10-23 12:23:25

如何驗證背景（css）圖像是否已加載？

回答

相關問題