Javascript/jQuery를 사용하여 이미지가 로드되었는지 확인하려면 어떻게 해야 합니까?
큰 이미지를 사용자의 브라우저 창에 맞게 크기를 조정하기 위해 자바스크립트를 작성하고 있습니다.(저는 안타깝게도 소스 이미지의 크기를 조절하지 못합니다.)
따라서 HTML에는 다음과 같은 내용이 있습니다.
<img id="photo"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
요 를 제가 할 수 있는 ?src 속의 img태그가 다운로드 되었습니까?
합니다를 문제가 합니다. 왜냐하면 저는 문제가 있습니다.$(document).ready()브라우저가 이미지를 로드하기 전에 실행됩니다.$("#photo").width()그리고.$("#photo").height()자리 표시자의 크기(alt 텍스트)를 반환합니다.제 경우에는 134 x 20 정도입니다.
지금은 사진의 높이가 150 이하인지 확인하고 있고, 만약 그렇다면 그냥 alt text라고 가정하고 있습니다.하지만 이것은 상당한 해킹이며, 사진의 높이가 150픽셀 미만이면(특정한 경우에는 그렇지 않을 수도 있음), 또는 Alt 텍스트의 높이가 150픽셀 이상이면(작은 브라우저 창에서 발생할 수도 있음) 고장이 발생합니다.
편집: 코드를 보고 싶은 모든 사람:
$(function()
{
var REAL_WIDTH = $("#photo").width();
var REAL_HEIGHT = $("#photo").height();
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(REAL_HEIGHT < 150)
{
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
if(REAL_HEIGHT < 150)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
업데이트: 제안해 주셔서 감사합니다.콜백을 설정하면 이벤트가 발생하지 않을 위험이 있습니다.$("#photo").load이벤트, 그래서 이미지 태그에 직접 onLoad 이벤트를 정의하였습니다.참고로, 제가 사용하게 된 코드는 다음과 같습니다.
<img id="photo"
onload="photoLoaded();"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
다음은 자바스크립트로:
//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
isPhotoLoaded = true;
}
$(function()
{
//Hides scrollbars, so we can resize properly. Set with JS instead of
// CSS so that page doesn't break with JS disabled.
$("body").css("overflow", "hidden");
var REAL_WIDTH = -1;
var REAL_HEIGHT = -1;
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(!isPhotoLoaded)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
else if(REAL_WIDTH < 0)
{
//first time in this function since photo loaded
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
이벤트 수신기를 추가하거나 이미지가 onload와 함께 표시되도록 합니다.그럼 거기서 치수를 계산해보세요.
<img id="photo"
onload='loaded(this.id)'
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
jquery data store를 사용하여 'loaded' 상태를 정의할 수 있습니다.
<img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />
그런 다음 다른 작업을 수행할 수 있습니다.
if ($('#myimage').data('loaded')) {
// loaded, so do stuff
}
정답은 event.special.load를 사용하는 것입니다.
브라우저 캐시에서 이미지를 로드하는 경우 로드 이벤트가 트리거되지 않을 수 있습니다.이러한 가능성을 고려하기 위해 이미지가 준비되면 즉시 실행되는 특수 로드 이벤트를 사용할 수 있습니다.event.special.load는 현재 플러그인으로 사용할 수 있습니다.
.load()의 문서를 기준으로 합니다.
Alain이 말한 것을 수행하고 싶지만, 때때로 이미지가 돔 준비 전에 로드되기 때문에 로드 핸들러가 작동하지 않습니다.가장 좋은 방법은 Alain의 말대로 하되, load hander를 부착한 후 javascript로 이미지의 src를 설정하는 것입니다.이렇게 하면 불이 난다는 걸 보장을 받을 수 있습니다.
접근성 측면에서, 당신의 사이트는 여전히 자바스크립트가 없는 사람들에게 효과가 있습니까?img 태그에 올바른 src를 지정하고 js를 실행하기 위해 돔 레디 핸들러를 첨부할 수 있습니다. 이미지 src를 지운 다음(페이지 깜박임을 방지하기 위해 CSS로 고정 및 높이 지정) img 로드 핸들러를 설정한 다음 src를 올바른 파일로 재설정합니다.이렇게 하면 모든 베이스를 커버합니다 :)
당신의 원래 질문에 대한 최근 의견 중 하나에 의하면.
$(function() {
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size() {
if (!$("#photo").get(0).complete) {
$("#photo").load(function() {
adjust_photo_size();
});
} else {
...
}
});
경고 이 답변은 ie8 이하에서 심각한 루프를 일으킬 수 있습니다. 브라우저에서 img.complete가 항상 적절하게 설정되지 않기 때문입니다.ie8을 지원해야 하는 경우 플래그를 사용하여 이미지가 로드된 것을 기억합니다.
다음과 같은 방법을 시도해 보십시오.
$("#photo").load(function() {
alert("Hello from Image");
});
'images'라는 jQuery 플러그인이 있습니다.요소의 이미지가 로드되었는지 확인하는 크로스 브라우저 호환 방법을 제공하는 "Loaded"입니다.
사이트: https://github.com/desandro/imagesloaded/
내부에 많은 이미지가 있는 컨테이너의 용도:
$('container').imagesLoaded(function(){
console.log("I loaded!");
})
플러그인은 훌륭합니다.
- 내부에 많은 이미지가 있는 컨테이너를 확인하기 위해 작동합니다.
- img가 로드되었는지 확인하기 위해 작동합니다.
이게 내게 효과가 있다는 걸 알았어요
document.querySelector("img").addEventListener("load", function() { alert('onload!'); });
인정된 답변에 대해 논평한 Frank Schwieterman에게 전적으로 공이 돌아갔습니다.이걸 여기에 둬야 했어요, 너무 값비싼...
이것에 대한 의견이 있습니까?
...
doShow = function(){
if($('#img_id').attr('complete')){
alert('Image is loaded!');
} else {
window.setTimeout('doShow()',100);
}
};
$('#img_id').attr('src','image.jpg');
doShow();
...
모든 곳에서 일하는 것 같군요
방금 jQuery Depended Object를 사용하여 이미지를 로드하는 jQuery 함수를 만들었습니다. 이 함수는 로드/오류 이벤트에서 매우 쉽게 반응할 수 있습니다.
$.fn.extend({
loadImg: function(url, timeout) {
// init deferred object
var defer = $.Deferred(),
$img = this,
img = $img.get(0),
timer = null;
// define load and error events BEFORE setting the src
// otherwise IE might fire the event before listening to it
$img.load(function(e) {
var that = this;
// defer this check in order to let IE catch the right image size
window.setTimeout(function() {
// make sure the width and height are > 0
((that.width > 0 && that.height > 0) ?
defer.resolveWith :
defer.rejectWith)($img);
}, 1);
}).error(function(e) {
defer.rejectWith($img);
});
// start loading the image
img.src = url;
// check if it's already in the cache
if (img.complete) {
defer.resolveWith($img);
} else if (0 !== timeout) {
// add a timeout, by default 15 seconds
timer = window.setTimeout(function() {
defer.rejectWith($img);
}, timeout || 15000);
}
// return the promise of the deferred object
return defer.promise().always(function() {
// stop the timeout timer
window.clearTimeout(timer);
timer = null;
// unbind the load and error event
this.off("load error");
});
}
});
용도:
var image = $('<img />').loadImg('http://www.google.com/intl/en_com/images/srpr/logo3w.png')
.done(function() {
alert('image loaded');
$('body').append(this);
}).fail(function(){
alert('image failed');
});
작동하는 모습 보기: http://jsfiddle.net/roberkules/AdWZj/
이 기능은 측정 가능한 치수를 기준으로 영상이 로드되었는지 확인합니다.이 기법은 일부 이미지를 이미 로드한 후 스크립트를 실행하는 경우에 유용합니다.
imageLoaded = function(node) {
var w = 'undefined' != typeof node.clientWidth ? node.clientWidth : node.offsetWidth;
var h = 'undefined' != typeof node.clientHeight ? node.clientHeight : node.offsetHeight;
return w+h > 0 ? true : false;
};
우리는 이미지를 여러 개 로드하고 이미지를 로드한 후에야 다른 기능을 수행하는 페이지를 개발했습니다.트래픽이 많이 발생하는 바쁜 사이트였습니다.다음과 같은 간단한 스크립트가 실질적으로 모든 브라우저에서 작동한 것으로 보입니다.
$(elem).onload = function() {
doSomething();
}
하지만 이건 IE9의 잠재적인 문제입니다!
우리가 보고한 유일한 브라우저는 IE9뿐입니다.놀랍지 않나요?이 문제를 해결하는 가장 좋은 방법은 다음과 같이 onload 함수가 정의된 후까지 이미지에 src를 할당하지 않는 것입니다.
$(elem).onload = function() {
doSomething();
}
$(elem).attr('src','theimage.png');
IE 9는 때때로 던지지 않을 것 같습니다.onload이유야 어떻든 간에이 페이지의 다른 솔루션(예: Evan Carroll의 솔루션)은 여전히 작동하지 않았습니다.논리적으로 로드 상태가 이미 성공했는지 확인하고 성공하지 않았다면 온로드 핸들러를 설정했습니다. 그러나 테스트를 통해 이미지가 js의 두 라인 사이에서 로드되어 첫 번째 라인에 로드되지 않은 것으로 나타나고 온로드 핸들러가 설정되기 전에 로드될 수 있음을 입증했습니다.
원하는 것을 얻는 가장 좋은 방법은 이미지의 src를 설정하기 전까지는 정의하지 않는 것입니다.onload이벤트 트리거.
최근에서야 IE8 지원을 중단했기 때문에 IE9 이전 버전에 대해 설명할 수 없습니다. IE10 및 11뿐만 아니라 Firefox, Chrome, Opera, Safari 및 사용자가 사용하던 모든 모바일 브라우저 중 IE9 이전 버전에 대해 설명할 수 없습니다.src할당하기 전에onload핸들러는 문제가 되지도 않았습니다.
순수 CSS 솔루션을 함께 제안해도 되겠습니까?
이미지를 보여줄 Div만 있으면 됩니다.이미지를 배경으로 설정합니다.그럼 그 재산을 가지고 있겠군요.background-size: cover아니면background-size: contain당신이 원하는 것에 따라.
cover작은 변이 상자를 덮을 때까지 이미지를 잘라냅니다.contain전체 이미지를 디브 안에 보관하고 측면에 공간을 남겨둘 것입니다.
아래의 토막글을 확인합니다.
div {
height: 300px;
width: 300px;
border: 3px dashed grey;
background-position: center;
background-repeat: no-repeat;
}
.cover-image {
background-size: cover;
}
.contain-image {
background-size: contain;
}<div class="cover-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>
<br/>
<div class="contain-image" style="background-image:url(https://assets1.ignimgs.com/2019/04/25/avengers-endgame-1280y-1556226255823_1280w.jpg)">
</div>이 간단한 솔루션이 제게 가장 적합하다는 것을 알게 되었습니다.
function setEqualHeight(a, b) {
if (!$(a).height()) {
return window.setTimeout(function(){ setEqualHeight(a, b); }, 1000);
}
$(b).height($(a).height());
}
$(document).ready(function() {
setEqualHeight('#image', '#description');
$(window).resize(function(){setEqualHeight('#image', '#description')});
});
</script>
image.complete는 https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete 의 다른 옵션일 수 있습니다.
언급URL : https://stackoverflow.com/questions/263359/how-can-i-determine-if-an-image-has-loaded-using-javascript-jquery
'programing' 카테고리의 다른 글
| 절대값 angularjs 표시 (0) | 2023.10.02 |
|---|---|
| "npm run dev"와 "npm start"의 차이 (0) | 2023.10.02 |
| C에서 char **는 무엇입니까? (0) | 2023.10.02 |
| C에서 구조의 포인터는 항상 첫 번째 부재를 가리킵니까? (0) | 2023.10.02 |
| Oracle용 Eclipse Database Tools에서 자동 커밋을 비활성화하는 방법은 무엇입니까? (0) | 2023.10.02 |