배경 이미지가 로드되었는지 확인하려면 어떻게 해야 합니까?

배경 이미지가 로드되었는지 확인하려면 어떻게 해야 합니까?

본문 태그에 배경 이미지를 설정한 다음 다음과 같은 코드를 실행합니다.

$('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가 로드된 시점을 감지합니다.

편집: 바닐라 자바스크립트에서는 다음과 같이 표시됩니다.

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

jQuery 플러그인이 있습니다.waitForImages배경 이미지가 다운로드된 시점을 탐지할 수 있습니다.

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

프리로더를 추가하고 배경 이미지를 설정한 다음 이벤트 수신기와 함께 가비지 수집을 위해 설정하는 순수 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>

CSS 자산에 대한 JS 콜백은 없습니다.

이와 같은 것:

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

여러 이미지와 함께 사용할 수 있는 장점이 있는 솔루션을 찾았습니다(이 예에서는 설명하지 않음).

이 질문에 대한 @adeneo의 대답에서:

배경 이미지가 있는 요소가 있으면 다음과 같이

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

이미지 URL을 가져와서 온로드 핸들러가 있는 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();

다음은 이 작업을 수행할 수 있도록 만든 작은 플러그인입니다. 여러 배경 이미지와 여러 요소에도 사용할 수 있습니다.

기사 읽기:

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

저는 이것을 가능하게 하기 위해 순수한 자바스크립트 해킹을 했습니다.

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

여기 간단한 바닐라 핵이 있습니다~

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

https://github.com/alexanderdickson/waitForImages

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

언급URL : https://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded