이미지가 jQuery로 로드되었는지 확인합니다(오류 없음).
되지 않은목록에 된 이미지 Query 라이브러리에서 JavaScript를 사용하여 정렬되지 않은 목록에 포함된 이미지 미리 보기를 조작하고 있습니다.이미지가 로드되면 한 가지 작업이 수행되고 오류가 발생하면 다른 작업이 수행됩니다. jQuery를 사용하고 load() ★★★★★★★★★★★★★★★★★」error()메서드를 이벤트로 사용합니다.이러한 이벤트 후 이미지 DOM 요소에 .complete가 있는지 확인하고 jQuery가 이벤트를 등록하기 전에 이미지가 로드되지 않았는지 확인합니다.
jQuery가 이벤트를 등록하기 전에 오류가 발생한 경우를 제외하고 올바르게 작동합니다.내가 생각할 수 있는 유일한 해결책은 img를 사용하는 것이다.onerrorcomplete를때 "스토어를 체크할 수 을 나타내는 를 글로벌하게( 그합니다.complete를 체크할 때 jQuery가 해당 "스토어/노드"를 확인할 수 있도록 실패했음을 나타내는 "플래그"를 글로벌하게(또는 해당 노드 자체) 저장합니다.
더 나은 해결책을 가진 사람?
편집: 굵은 글씨로 포인트를 추가해, 아래에 상세 내용을 추가.이미지에 로드 및 오류 이벤트를 추가한 후 이미지가 완료되었는지 확인합니다.그러면 이벤트 등록 전에 이미지가 로딩되어 있으면 알 수 있습니다.이벤트 후 이미지가 로드되지 않으면 이벤트가 로드될 때 처리됩니다.문제는 이미 이미지가 로드되었는지 쉽게 확인할 수 있지만 오류가 발생했는지 알 수 없다는 것입니다.
complete ★★★★★★★★★★★★★★★★★」naturalWidth이치노
https://stereochro.me/ideas/detecting-broken-images-js
function IsImageOk(img) {
// During the onload event, IE correctly identifies any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}
// However, they do have two very useful properties: naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (img.naturalWidth === 0) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
}
하나의 은 '보다', '보다', '보다'를 것입니다.onload "/"/"onerror 이미지로 를 발생시킵니다.src에 src츠요시하다
$("<img/>")
.on('load', function() { console.log("image loaded correctly"); })
.on('error', function() { console.log("error loading image"); })
.attr("src", $(originalImage).attr("src"))
;
이게 도움이 됐으면 좋겠네요!
요소의 W3C HTML 사양에 대한 이해를 바탕으로 다음과 같이와 Atribut의 조합을 사용하여 이 작업을 수행할 수 있습니다.
function imgLoaded(imgElement) {
return imgElement.complete && imgElement.naturalHeight !== 0;
}
Atribute의 사양:
다음 조건 중 하나에 해당하는 경우 IDL Atribute complete는 true를 반환해야 합니다.
- src Atribut은 생략됩니다.
- 리소스를 가져온 후 네트워킹 작업 원본이 대기열에 넣는 마지막 작업이 대기열에 있습니다.
- img 요소는 완전히 사용할 수 있습니다.
- img 요소가 파손되었습니다.
그렇지 않으면 Atribute는 false를 반환해야 합니다.
기본적으로는, ★★★★★★★★★★★★★★★★★★★★★★★★★★★」complete이미지 로드가 완료되었거나 로드하지 못한 경우 true를 반환합니다.이미지가 정상적으로 로딩된 경우에만 Atribute를 체크해야 합니다.
IDL '''
naturalWidth★★★★★★★★★★★★★★★★★」naturalHeight이미지를 사용할 수 있는 경우 이미지의 고유한 폭과 높이를 CSS 픽셀 단위로 반환해야 합니다.0으로 하다
다음과 같이 정의됩니다.
img는 항상 다음 중 하나의 상태입니다.
- 사용할 수 없음 - 사용자 에이전트가 이미지 데이터를 가져오지 않았습니다.
- 부분적으로 사용 가능 - 사용자 에이전트가 일부 이미지 데이터를 가져왔습니다.
- Complete Available(완전 사용 가능) - 사용자 에이전트가 모든 이미지 데이터를 가져왔고 적어도 이미지 치수는 사용할 수 있습니다.
- 파손 - 사용자 에이전트는 가능한 모든 이미지 데이터를 취득했지만 이미지 치수를 취득하기에 충분한 이미지 디코딩조차 할 수 없습니다(이미지가 파손되었거나 포맷이 지원되지 않거나 데이터를 얻을 수 없습니다).
img 요소가 부분적으로 사용 가능한 상태 또는 완전히 사용 가능한 상태인 경우 사용 가능한 것으로 간주됩니다.
)인 상태가 "브레이크드)(브레이크드) 상태가 .naturalHeight0이 .
때문에, 체크하고 .imgElement.complete && imgElement.naturalHeight !== 0이미지가 정상적으로 로드되었는지 여부를 알려줍니다.
자세한 내용은 요소의 W3C HTML 사양 또는 MDN에서 확인할 수 있습니다.
나는 여러 가지 방법을 시도했고 이 방법만이 나에게 통했다.
//check all images on the page
$('img').each(function(){
var img = new Image();
img.onload = function() {
console.log($(this).attr('src') + ' - done!');
}
img.src = $(this).attr('src');
});
또한 모든 영상이 DOM에 로드되고 준비되면 트리거되는 콜백 기능을 추가할 수 있습니다.이는 동적으로 추가된 이미지에도 적용됩니다.http://jsfiddle.net/kalmarsh80/nrAPk/
javascript 라이브러리를 사용합니다.
플레인 Javascript 및 jQuery 플러그인으로 사용할 수 있습니다.
특징:
- IE8+에서 공식 지원
- 라이선스: MIT
- 의존관계: 없음
- 중량 (최소 및 압축) : 7 kb (경량!)
자원.
- github 프로젝트: https://github.com/desandro/imagesloaded
- 공식 웹사이트 : http://imagesloaded.desandro.com/
- https://stackoverflow.com/questions/26927575/why-use-imagesloaded-javascript-library-versus-jquerys-window-load
- 이미지 로드 Javascript 라이브러리: 브라우저 및 디바이스 지원이란?
의 .
및 Chrome " Firefox "에서의 작업
작업 jsFiddle(콘솔을 열어 결과를 확인)
$('img').each(function(){ // selecting all image element on the page
var img = new Image($(this)); // creating image element
img.onload = function() { // trigger if the image was loaded
console.log($(this).attr('src') + ' - done!');
}
img.onerror = function() { // trigger if the image wasn't loaded
console.log($(this).attr('src') + ' - error!');
}
img.onAbort = function() { // trigger if the image load was abort
console.log($(this).attr('src') + ' - abort!');
}
img.src = $(this).attr('src'); // pass src to image object
// log image attributes
console.log(img.src);
console.log(img.width);
console.log(img.height);
console.log(img.complete);
});
주의: jQuery를 사용했는데, 완전한 javascript를 사용할 수 있다고 생각했습니다.
OpenClassRoom에서 좋은 정보를 찾을 수 있습니다.--> 이것은 프랑스어 포럼입니다.
이 페이지의 흥미로운 솔루션을 읽고 SLaks와 Noyo의 투고에 영향을 많이 받은 사용하기 쉬운 솔루션을 작성했습니다.이것은 Chrome, IE, Firefox, Safari, Opera의 최신 버전(모두 Windows)에서 동작하고 있는 것 같습니다.또, 제가 사용한 iPhone/iPad 에뮬레이터에서도 동작했습니다.
이 솔루션과 SLaks 및 Noyo의 투고와의 큰 차이점 중 하나는 이 솔루션이 주로 naturalWidth 및 naturalHeight 속성을 체크한다는 것입니다.현재 브라우저 버전에서는 이 두 가지 속성이 가장 유용하고 일관된 결과를 제공하는 것으로 나타났습니다.
이 코드는 이미지가 완전히 로드되고 성공적으로 로드되면 TRUE를 반환합니다.이미지가 아직 완전히 로드되지 않았거나 로드하지 못한 경우 FALSE를 반환합니다.
한 가지 유의해야 할 점은 이미지가 0x0 픽셀 이미지인 경우에도 이 함수가 FALSE를 반환한다는 것입니다.그러나 이러한 이미지는 매우 드물기 때문에 0x0 픽셀의 이미지가 로딩되었는지 확인하는 데 도움이 되는 경우는 아직 없습니다.
먼저 "isLoaded"라는 새로운 기능을 HTMLImageElement 프로토타입에 부착하여 어떤 이미지 요소에서도 사용할 수 있도록 합니다.
HTMLImageElement.prototype.isLoaded = function() {
// See if "naturalWidth" and "naturalHeight" properties are available.
if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
return !(this.naturalWidth == 0 && this.naturalHeight == 0);
// See if "complete" property is available.
else if (typeof this.complete == 'boolean')
return this.complete;
// Fallback behavior: return TRUE.
else
return true;
};
그리고 이미지 로드 상태를 확인해야 할 때마다 "isLoaded" 함수를 호출합니다.
if (someImgElement.isLoaded()) {
// YAY! The image loaded
}
else {
// Image has not loaded yet
}
SLaks와 Noyo의 투고에 대한 Giorgian의 코멘트에 따르면, 이 솔루션은 Safari Mobile에서 SRC 속성을 변경할 계획이라면 일회성 체크로만 사용할 수 있습니다.그러나 기존 이미지 요소의 SRC 속성을 변경하는 대신 새로운 SRC 속성을 사용하여 이미지 요소를 생성함으로써 이 문제를 해결할 수 있습니다.
실시간 네트워크 디텍터 - 페이지를 새로 고치지 않고 네트워크 상태를 확인합니다. (jquery가 아니라 테스트되었으며 100% 작동합니다. (Firefox v25.0에서 테스트됨)
코드:
<script>
function ImgLoad(myobj){
var randomNum = Math.round(Math.random() * 10000);
var oImg=new Image;
oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
oImg.onload=function(){alert('Image succesfully loaded!')}
oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>
<button id="reloadbtn" onclick="ImgLoad();">Again!</button>
연결이 끊긴 경우 다시 버튼을 누르십시오.
업데이트 1: 페이지를 새로 고치지 않고 자동 검색:
<script>
function ImgLoad(myobj){
var randomNum = Math.round(Math.random() * 10000);
var oImg=new Image;
oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
oImg.onload=function(){networkstatus_div.innerHTML="";}
oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}
networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>
<div id="networkstatus_div"></div>
위의 방법을 조합하여 브라우저 간에 동작하도록 했습니다(동적으로 이미지를 돔에 삽입할 필요도 있었습니다).
$('#domTarget').html('<img src="" />');
var url = '/some/image/path.png';
$('#domTarget img').load(function(){}).attr('src', url).error(function() {
if ( isIE ) {
var thisImg = this;
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
}
},250);
} else {
$(this).attr('src', '/web/css/img/picture-broken-url.png');
}
});
주의: 에 유효한 부울 상태를 지정해야 합니다.IE 변수
var isImgLoaded = function(imgSelector){
return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}
// 또는 플러그인으로
$.fn.extend({
isLoaded: function(){
return this.prop("complete") && this.prop("naturalWidth") !== 0;
}
})
// $(".myImage").isLoaded()
제가 알기로는 .complete 속성은 표준이 아닙니다.보편적이지 않을 수도 있지만...Firefox versions IE에서는 다르게 동작하는 것 같습니다.여러 이미지를 javascript로 로드하여 완료 여부를 확인합니다.파이어폭스에서는, 이것은 매우 효과가 있는 것 같습니다.IE 에서는, 이미지가 다른 스레드에 로드되고 있는 것처럼 보이기 때문에, 그렇지 않습니다.image.src에 대한 할당과 image.complete 속성을 확인할 때까지 지연을 두어야만 작동합니다.
image.onload 및 image.onerror를 사용하는 것도 기능하지 않습니다.함수가 호출되었을 때 어떤 이미지를 말하는지 알기 위해 파라미터를 전달해야 하기 때문입니다.어떤 방법으로든 실패하는 것 같습니다.실제로 같은 기능의 다른 인스턴스가 아니라 같은 함수를 통과하는 것처럼 보이기 때문입니다.따라서 이미지를 식별하기 위해 전달한 값은 항상 루프의 마지막 값이 됩니다.나는 이 문제를 회피할 방법이 없다.
Safari와 Chrome에서는 image.complete true와 naturalWidth 설정이 표시되며 오류 콘솔에 해당 이미지의 404가 표시되어도 표시됩니다.이걸 테스트하려고 일부러 그 이미지를 지웠어요그러나 Firefox 및 IE에서는 위의 방법이 적합합니다.
이 코드 조각은 브라우저 캐싱 문제를 해결하는 데 도움이 되었습니다.
$("#my_image").on('load', function() {
console.log("image loaded correctly");
}).each(function() {
if($(this).prop('complete')) $(this).load();
});
브라우저 캐시가 비활성화되면 다음 코드만 작동하지 않습니다.
$("#my_image").on('load', function() {
console.log("image loaded correctly");
})
기능을 하려면 , 다음의 항목을 추가할 필요가 있습니다.
.each(function() {
if($(this).prop('complete')) $(this).load();
});
「」를 해 주세요.JavaScript이미지가 정상적으로 로드되었는지 확인할 수 있는 코드입니다.
document.onready = function(e) {
var imageobj = new Image();
imageobj.src = document.getElementById('img-id').src;
if(!imageobj.complete){
alert(imageobj.src+" - Not Found");
}
}
이것을 시험해 보세요
이미지 로드와 Event Listener 로드에 많은 문제가 있었습니다.
아무리 노력해도 결과는 미덥지 않았다
하지만 그 때 해결책을 찾았죠엄밀히 말하면 좋은 것은 아니지만, 이미지 로딩에 실패하는 일은 없습니다.
내가 한 일:
document.getElementById(currentImgID).addEventListener("load", loadListener1);
document.getElementById(currentImgID).addEventListener("load", loadListener2);
function loadListener1()
{
// Load again
}
function loadListener2()
{
var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
alert("Image loaded");
}
이미지를 한 번 로드하는 대신 첫 번째 직후에 두 번째 로드하면 둘 다 이벤트 핸들러를 통해 실행됩니다.
두통이 다 사라졌어요!
그건 그렇고 스택오버플로우에서 오신 분들은 이미 저를 수백 번 이상 도와주셨습니다.대단히 감사합니다!
이 제품은 잘 작동했습니다. :)
$('.progress-image').each(function(){
var img = new Image();
img.onload = function() {
let imgSrc = $(this).attr('src');
$('.progress-image').each(function(){
if($(this).attr('src') == imgSrc){
console.log($(this).parent().closest('.real-pack').parent().find('.shimmer').fadeOut())
}
})
}
img.src = $(this).attr('src');
});
언급URL : https://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-with-jquery
'programing' 카테고리의 다른 글
| 요소가 jQuery로 표시되는지 여부를 검출합니다. (0) | 2022.12.26 |
|---|---|
| 기본 HTML 보기를 렌더링하시겠습니까? (0) | 2022.12.26 |
| Python 프로젝트용 .gitignore 파일을 추가하기 위한 베스트 프랙티스? (0) | 2022.12.07 |
| mysql을 사용하여 쿼리 결과를 변수에 저장하는 방법 (0) | 2022.12.07 |
| 본문 요소에 커스텀클래스를 추가하려고 하면 Nuxt JS에서 SSR 인코딩 오류가 발생하는 이유는 무엇입니까? (0) | 2022.12.07 |