How can I check if a background image is loaded?

后端 未结 10 1365
囚心锁ツ
囚心锁ツ 2020-11-22 07:05

I want to set a background image on the body tag, then run some code - like this:

$(\'body\').css(\'background-image\',\'http://picture.de/image.png\').load(         


        
相关标签:
10条回答
  • 2020-11-22 07:37

    I've located a solution that worked better for me, and which has the advantage of being usable with several images (case not illustrated in this example).

    From @adeneo's answer on this question :

    If you have an element with a background image, like this

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

    You can wait for the background to load by getting the image URL and using it for an image object in javascript with an onload handler

    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();
    
    0 讨论(0)
  • 2020-11-22 07:39

    try this:

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

    this will create new image in memory and use load event to detect when the src is loaded.

    0 讨论(0)
  • 2020-11-22 07:39

    https://github.com/alexanderdickson/waitForImages

    $('selector').waitForImages({
        finished: function() {
           // ...
        },
        each: function() {
           // ...
        },
        waitForAll: true
    });
    
    0 讨论(0)
  • 2020-11-22 07:41

    pure JS solution that will add preloader, set the background-image and then set it up for garbage collection along with it's event listener:

    Short version:

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

    A bit longer with nice opacity transition:

    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>

    0 讨论(0)
  • 2020-11-22 07:47

    I did a pure javascript hack to make this possible.

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

    Or

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

    css:

    .image_error {
        display: none;
    }
    
    0 讨论(0)
  • 2020-11-22 07:48

    I have a jQuery plugin called waitForImages that can detect when background images have downloaded.

    $('body')
      .css('background-image','url(http://picture.de/image.png)')
      .waitForImages(function() {
        alert('Background image done loading');
        // This *does* work
      }, $.noop, true);
    
    0 讨论(0)
提交回复
热议问题