如何檢查背景圖像是否已加載？

Question

我想在 body 標簽上設置一個背景圖像，然后運行一些代碼 - 像這樣：

$('body').css('background-image','http://picture.de/image.png').load(function() {
    alert('Background image done loading');
    // This doesn't work
});

如何確保背景圖像已完全加載？

Answer 1

嘗試這個：

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks as @benweet suggested
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

這將在內存中創建一個新圖像並使用 load 事件來檢測 src 何時加載。

編輯：在 Vanilla JavaScript 中，它看起來像這樣：

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

它可以抽象為返回承諾的方便函數：

function load(src) {
    return new Promise(function(resolve, reject) {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = 'url(' + image + ')';
});

Answer 2

我有一個名為waitForImages的jQuery 插件，它可以檢測背景圖像何時下載。

$('body')
  .css('background-image','url(http://picture.de/image.png)')
  .waitForImages(function() {
    alert('Background image done loading');
    // This *does* work
  }, $.noop, true);

Answer 3

像這樣的東西：

var $div = $('div'),
  bg = $div.css('background-image');
  if (bg) {
    var src = bg.replace(/(^url\()|(\)$|[\"\'])/g, ''),
      $img = $('<img>').attr('src', src).on('load', function() {
        // do something, maybe:
        $div.fadeIn();
      });
  }
});

Answer 4

CSS 資產沒有 JS 回調。

Answer 5

純 JS 解決方案，將添加預加載器，設置背景圖像，然后將其設置為垃圾收集及其事件偵聽器：

精簡版：

 const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; let bgElement = document.querySelector("body"); let preloaderImg = document.createElement("img"); preloaderImg.src = imageUrl; preloaderImg.addEventListener('load', (event) => { bgElement.style.backgroundImage = `url(${imageUrl})`; preloaderImg = null; });

更長一點的不透明度過渡：

 const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; let bgElement = document.querySelector(".bg-lazy"); bgElement.classList.add("bg-loading"); let preloaderImg = document.createElement("img"); preloaderImg.src = imageUrl; preloaderImg.addEventListener('load', (event) => { bgElement.classList.remove("bg-loading"); bgElement.style.backgroundImage = `url(${imageUrl})`; preloaderImg = null; });

 .bg-lazy { height: 100vh; width: 100vw; transition: opacity 1s ease-out; } .bg-loading { opacity: 0; }

 <div class="bg-lazy"></div>

Answer 6

這是我制作的一個小插件，可以讓您做到這一點，它也適用於多個背景圖像和多個元素：

閱讀文章：

http://catmull.uk/code-lab/background-image-loaded/

或者直接看插件代碼：

http://catmull.uk/downloads/bg-loaded/bg-loaded.js

所以只需包含插件，然后在元素上調用它：

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded();
</script>

顯然下載插件並將其存儲在您自己的主機上。

默認情況下，它會在背景加載后為每個匹配的元素添加一個額外的“bg-loaded”類，但您可以通過向它傳遞不同的函數來輕松更改它，如下所示：

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded({
      afterLoaded : function() {
         alert('Background image done loading');
      }
   });
</script>

這是一個演示它工作的代碼筆。

http://codepen.io/catmull/pen/Lfcpb

Answer 7

我找到了一個更適合我的解決方案，它的優點是可用於多個圖像（本示例中未說明的情況）。

來自@adeneo 對這個問題的回答：

如果你有一個帶有背景圖片的元素，像這樣

<div id="test" style="background-image: url(link/to/image.png)"><div>

您可以通過獲取圖像 URL 並將其用於帶有 onload 處理程序的 javascript 中的圖像對象來等待背景加載

var src = $('#test').css('background-image'); var url = src.match(/\\((.*?)\\)/)[1].replace(/('|")/g,''); var img = new Image(); img.onload = function() { alert('image loaded'); } img.src = url; if (img.complete) img.onload();

Answer 8

我做了一個純 javascript hack 來使這成為可能。

<div class="my_background_image" style="background-image: url(broken-image.jpg)">
<img class="image_error" src="broken-image.jpg" onerror="this.parentElement.style.display='none';">
</div>

或者

onerror="this.parentElement.backgroundImage = "url('image_placeHolder.png')";

css：

.image_error {
    display: none;
}

Answer 9

https://github.com/alexanderdickson/waitForImages

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

Answer 10

這是一個簡單的香草黑客~

(function(image){
  image.onload = function(){ 
                   $(body).addClass('loaded-background');
                   alert('Background image done loading');
                   // TODO fancy fade-in
                 };
  image.src    = "http://picture.de/image.png";
})(new Image());