Làm thế nào tôi có thể kiểm tra nếu một hình ảnh nền được tải?

Tôi muốn đặt hình nền trên thẻ body, sau đó chạy một số mã - như thế này:

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

Làm thế nào tôi có thể chắc chắn rằng hình nền được tải đầy đủ?

thử cái này:

$('<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)');
});

điều này sẽ tạo ra hình ảnh mới trong bộ nhớ và sử dụng sự kiện tải để phát hiện khi src được tải.

Tôi có một plugin jQuery được gọi là waitForImagescó thể phát hiện khi hình ảnh nền đã được tải xuống.

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

Một cái gì đó như thế này:

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();
      });
  }
});

Không có cuộc gọi lại JS cho tài sản CSS.

giải pháp JS thuần túy sẽ thêm trình tải trước, đặt ảnh nền và sau đó thiết lập nó cho bộ sưu tập rác cùng với trình nghe sự kiện :

Phiên bản ngắn:

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;
});

Một chút nữa với quá trình chuyển đổi độ mờ đẹp:

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>

Đây là một plugin nhỏ tôi đã tạo để cho phép bạn thực hiện chính xác điều này, nó cũng hoạt động trên nhiều hình nền và nhiều yếu tố:

Đọc bài viết:

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

hoặc đi thẳng đến mã plugin:

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

Vì vậy, chỉ cần bao gồm các plugin và sau đó gọi nó trên phần tử:

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

Rõ ràng tải về các plugin và lưu trữ nó trên lưu trữ của riêng bạn.

Theo mặc định, nó thêm một lớp "bg-load" bổ sung cho mỗi phần tử phù hợp khi nền được tải nhưng bạn có thể dễ dàng thay đổi điều đó bằng cách chuyển cho nó một hàm khác như thế này:

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

Đây là một codepen chứng minh nó hoạt động.

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

Tôi đã tìm ra một giải pháp phù hợp hơn với mình và có ưu điểm là có thể sử dụng được với một số hình ảnh (trường hợp không được minh họa trong ví dụ này).

Từ câu trả lời của @ adeneo về câu hỏi này :

Nếu bạn có một yếu tố với hình nền, như thế này

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

Bạn có thể đợi nền tải bằng cách lấy URL hình ảnh và sử dụng nó cho một đối tượng hình ảnh trong javascript với trình xử lý onload

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();

Tôi đã thực hiện một bản hack javascript thuần túy để thực hiện điều này.

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

Hoặc là

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

css:

.image_error {
    display: none;
}

https://github.com/alexanderdickson/waitForImages

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