[JQUERY] 배경 이미지가로드되었는지 어떻게 확인할 수 있나요?

배경 이미지가로드되었는지 어떻게 확인할 수 있나요?

해결법

1. ---

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

   이것은 SRC가로드 될 때 감지하는 메모리 사용로드 이벤트에 새로운 이미지를 생성합니다.

2. ---

   2.나는 배경 이미지를 다운로드 한 경우 검색 할 수 있습니다라는 waitForImages을의 플러그인 jQuery를 가지고있다.

   나는 배경 이미지를 다운로드 한 경우 검색 할 수 있습니다라는 waitForImages을의 플러그인 jQuery를 가지고있다.

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

3. ---

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

4. ---

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

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

5. ---

   5.프리 로더를 추가합니다 순수 JS 솔루션은 배경 이미지를 설정하고 다음의 이벤트 리스너와 함께 가비지 컬렉션을 위해 설정 :

   프리 로더를 추가합니다 순수 JS 솔루션은 배경 이미지를 설정하고 다음의 이벤트 리스너와 함께 가비지 컬렉션을 위해 설정 :

   짧은 버전 :

   CONST 이미지 URL = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; bgElement = document.querySelector ( "몸")하자; preloaderImg = document.createElement ( "IMG")를 보자; preloaderImg.src = 이미지 URL; preloaderImg.addEventListener ( '부하'(이벤트) => { bgElement.style.backgroundImage =`URL ($ {이미지 URL})`; preloaderImg = NULL; });

   A는 좋은 불투명도 전환과 더 비트 :

   CONST 이미지 URL = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; 하자 bgElement = document.querySelector ( "BG-게으른."); bgElement.classList.add ( "BG 로딩"); preloaderImg = document.createElement ( "IMG")를 보자; preloaderImg.src = 이미지 URL; preloaderImg.addEventListener ( '부하'(이벤트) => { bgElement.classList.remove ( "BG 로딩"); bgElement.style.backgroundImage =`URL ($ {이미지 URL})`; preloaderImg = NULL; }); .bg - 게으른 { 높이 : 100vh; 폭 : 100vw; 전환 : 불투명도 1S는 쉽게 아웃; } .bg 로딩 { 불투명도 : 0; }

6. ---

   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-로드"클래스를 추가합니다 :

   <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

7. ---

   7.나를 위해 좋은 일을하는 솔루션을 위치하고 있으며, 여러 이미지 (이 예에서는 도시되지 않은 경우)을 사용할 수 있다는 장점이있는 것.

   나를 위해 좋은 일을하는 솔루션을 위치하고 있으며, 여러 이미지 (이 예에서는 도시되지 않은 경우)을 사용할 수 있다는 장점이있는 것.

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

8. ---

   8.나는 순수 자바 스크립트는이 가능하게하는 해킹 않았다.

   나는 순수 자바 스크립트는이 가능하게하는 해킹 않았다.

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

9. ---

   9.https://github.com/alexanderdickson/waitForImages

   https://github.com/alexanderdickson/waitForImages

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

10. ---

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

from https://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded by cc-by-sa and MIT license