body 태그에 배경 이미지를 설정하고 다음과 같은 코드를 실행하고 싶습니다.
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
배경 이미지가 완전히로드되었는지 어떻게 확인할 수 있습니까?
url()
body 태그에 배경 이미지를 설정하고 다음과 같은 코드를 실행하고 싶습니다.
$('body').css('background-image','http://picture.de/image.png').load(function() {
alert('Background image done loading');
// This doesn't work
});
배경 이미지가 완전히로드되었는지 어떻게 확인할 수 있습니까?
url()
답변:
이 시도:
$('<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)');
});
그러면 메모리에 새 이미지가 생성되고 load 이벤트를 사용하여 src가로드되는시기를 감지합니다.
javascript:void($('<img/>').attr('src', 'http://farm6.static.flickr.com/5049/5220175127_5693faf952.jpg').load(function() { $('html').css('background-image', 'url(http://farm6.static.flickr.com/5049/5220175127_5693faf952.jpg)'); }))
하고 Firebug에서 HTTP 요청을 확인하십시오. 이 이미지가 다른 탭에서 열린 상태로 깜박임 페이지를 열면 HTTP 요청을 수행하지 않고이 그림을 즉시 보여줍니다. 캐시를 지우고 실행할 때 하나의 요청이있었습니다.
나는이 JQuery와 플러그인이 라는 waitForImages
배경 이미지를 다운로드 한 때를 감지 할 수 있습니다.
$('body')
.css('background-image','url(http://picture.de/image.png)')
.waitForImages(function() {
alert('Background image done loading');
// This *does* work
}, $.noop, true);
each
콜백을 사용하여로드 진행률을 표시 할 수도 있습니다 .
delay()
그렇게 작동하지 않습니다.
이 같은:
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();
});
}
});
bg.replace( ... , my_src )
. 그러나 내 질문은 : 일단 $ ( '<img>') <img>
이로 드 되면 정확히 어떻게됩니까 ... 실제로는 실제가 아니라는 것을 의미합니다. 단지 더미 자리 표시 자입니다.
<img>
DOM에 삽입되지 않습니다; 이미지 파일을 캐시에로드 할 때 브라우저를 "바보"하는 데 사용됩니다.
CSS 자산에 대한 JS 콜백이 없습니다.
프리 로더를 추가하고 배경 이미지를 설정 한 다음 이벤트 리스너와 함께 가비지 수집을 위해 설정하는 순수 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-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>
작동 방식을 보여주는 코드 펜이 있습니다.
나에게 더 잘 맞는 솔루션을 찾았으며 여러 이미지 (이 예제에서는 설명하지 않음)와 함께 사용할 수있는 이점이 있습니다.
이 질문에 대한 @adeneo의 답변에서 :
이와 같이 배경 이미지가있는 요소가있는 경우
<div id="test" style="background-image: url(link/to/image.png)"><div>
이미지 URL을 가져 와서 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
});
Image()
가있는 객체에 동일한 URL을 지정하십시오onload
.