ฉันจะตรวจสอบได้อย่างไรว่าภาพพื้นหลังโหลดหรือไม่

ฉันต้องการตั้งค่าภาพพื้นหลังบนแท็ก body จากนั้นเรียกใช้โค้ดบางอย่าง - เช่นนี้

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

ฉันจะแน่ใจได้อย่างไรว่าภาพพื้นหลังโหลดเต็มแล้ว

ลองนี้:

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

สิ่งนี้จะสร้างรูปภาพใหม่ในหน่วยความจำและใช้เหตุการณ์โหลดเพื่อตรวจจับเมื่อโหลด src

ฉันมีjQuery plugin ที่เรียกwaitForImagesว่าสามารถตรวจจับเมื่อภาพพื้นหลังดาวน์โหลด

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

บางสิ่งเช่นนี้

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

ไม่มีการเรียกกลับ JS สำหรับเนื้อหา CSS

โซลูชัน 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>

นี่คือปลั๊กอินเล็ก ๆ ที่ฉันทำเพื่อให้คุณสามารถทำสิ่งนี้ได้มันยังทำงานกับภาพพื้นหลังหลายภาพและองค์ประกอบหลายอย่าง:

อ่านบทความ:

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" เพิ่มเติมให้กับองค์ประกอบที่ตรงกันแต่ละครั้งเมื่อโหลดพื้นหลัง แต่คุณสามารถเปลี่ยนได้โดยง่ายผ่านฟังก์ชั่นต่าง ๆ ดังนี้:

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

นี่คือ codepen ที่แสดงให้เห็นว่ามันทำงานได้

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

ฉันพบวิธีแก้ปัญหาที่ใช้งานได้ดีกว่าสำหรับฉันและมีข้อได้เปรียบในการใช้งานกับรูปภาพหลายรูป (กรณีไม่ได้แสดงในตัวอย่างนี้)

จากคำตอบของ @ adeneo สำหรับคำถามนี้ :

หากคุณมีองค์ประกอบที่มีภาพพื้นหลังเช่นนี้

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

คุณสามารถรอให้พื้นหลังโหลดโดยรับ URL รูปภาพและใช้เป็นวัตถุรูปภาพใน javascript พร้อมตัวจัดการ 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();

ฉันแฮ็คจาวาสคริปต์ที่บริสุทธิ์เพื่อให้เป็นไปได้

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

https://github.com/alexanderdickson/waitForImages

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