복붙노트

[JQUERY] 이미지가 jQuery를 함께 (오류)를로드하지 않은 경우 확인

JQUERY

이미지가 jQuery를 함께 (오류)를로드하지 않은 경우 확인

해결법

  1. 1.또 다른 옵션은 메모리 이미지 요소에를 만들고 원본 이미지의 원래의 src 속성에의 SRC 속성을 설정하여 온로드 및 / 또는의 OnError 이벤트를 트리거하는 것입니다. 여기에 내가 무엇을 의미하는지의 예입니다 :

    또 다른 옵션은 메모리 이미지 요소에를 만들고 원본 이미지의 원래의 src 속성에의 SRC 속성을 설정하여 온로드 및 / 또는의 OnError 이벤트를 트리거하는 것입니다. 여기에 내가 무엇을 의미하는지의 예입니다 :

    $("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

    도움이 되었기를 바랍니다!

  2. 2.순서대로, 완전하고 naturalWidth 속성을 확인하십시오.

    순서대로, 완전하고 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;
}

  3. 3.img 요소에 대한 W3C HTML 사양에 대한 이해를 바탕으로, 당신은 전체의 조합을 사용하여이 작업을 수행 할 수 있어야하고 naturalHeight은과 같이 속성 :

    img 요소에 대한 W3C HTML 사양에 대한 이해를 바탕으로, 당신은 전체의 조합을 사용하여이 작업을 수행 할 수 있어야하고 naturalHeight은과 같이 속성 :

    function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

    전체 속성에 대한 사양에서 :

    그래서 본질적으로, 이미지가 하나 완성로드가있는 경우는 true, 또는 전체 반환로드하지 못했습니다. 우리는 이미지가 성공적으로 우리가 아니라 nauturalHeight 속성을 점검 할 필요가로드 전용 케이스를 원하기 때문에 :

    그리고 가능은과 같이 정의된다 :

    이미지가 (부하에 실패) "깨진"그래서 경우 naturalHeight은 0이됩니다, 그래서 다음은 깨진 상태가 아닌 사용 가능한 상태가됩니다.

    따라서, imgElement.complete && imgElement.naturalHeight! == 0을 선택하면 이미지가 성공적으로로드 여부를 알려해야합니다.

    당신은 img 요소에 대한 W3C HTML 사양이에 대한 자세한 내용을 읽거나 MDN에 있습니다.

  4. 4.나는 여러 가지 방법을 시도하고이 방법은 나를 위해 일한 유일한 하나입니다

    나는 여러 가지 방법을 시도하고이 방법은 나를 위해 일한 유일한 하나입니다

    //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/

  5. 5.를 사용하여 자바 스크립트 라이브러리를 imagesLoaded.

    를 사용하여 자바 스크립트 라이브러리를 imagesLoaded.

    일반 자바 스크립트와 jQuery 플러그인으로 사용 가능.

  6. 6.페이지에 이미지 요소로부터 정보를 검색 크롬과 파이어 폭스에 대한 테스트 작업 작업 jsFiddle (결과를 확인하려면 콘솔을 엽니 다)

    페이지에 이미지 요소로부터 정보를 검색 크롬과 파이어 폭스에 대한 테스트 작업 작업 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);

});

    참고 : 나는이 전체 자바 스크립트에 acheive 수 있습니다 생각, jQuery를 사용

    여기 OpenClassRoom 좋은 정보를 찾을 수 ->이 프랑스 포럼입니다

  7. 7.실시간 네트워크 검출기 - 페이지를 새로 고침없이 체크 네트워크 상태 : (이 JQuery와 아니지만, 테스트 및 100 % 작동 : () 파이어 폭스 v25.0에서 테스트)

    실시간 네트워크 검출기 - 페이지를 새로 고침없이 체크 네트워크 상태 : (이 JQuery와 아니지만, 테스트 및 100 % 작동 : () 파이어 폭스 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>

  8. 8.이 페이지의 흥미로운 솔루션을 읽은 후, 나는 (작성 기준) 크롬, IE, 파이어 폭스, 사파리의 꽤 최근 버전에서 작동하는 것 같군 사용하기 쉬운 매우 SLaks 영향 솔루션 '과 Noyo의 게시물을 작성하고, 오페라 (Windows의 모든). 또한, 아이폰 / 아이 패드에 근무 에뮬레이터 내가 사용.

    이 페이지의 흥미로운 솔루션을 읽은 후, 나는 (작성 기준) 크롬, IE, 파이어 폭스, 사파리의 꽤 최근 버전에서 작동하는 것 같군 사용하기 쉬운 매우 SLaks 영향 솔루션 '과 Noyo의 게시물을 작성하고, 오페라 (Windows의 모든). 또한, 아이폰 / 아이 패드에 근무 에뮬레이터 내가 사용.

    이 솔루션 및 SLaks 및 Noyo의 포스트 사이에 하나 개의 큰 차이는이 솔루션이 주로 naturalWidth 및 naturalHeight 속성을 검사한다는 것입니다. 나는 현재 브라우저 버전에서,이 두 특성이 가장 유용한하고 일관된 결과를 제공하는 것 것으로 나타났습니다.

    이미지가 완전하고 성공적으로로드되면이 코드는 TRUE를 반환합니다. 이 이미지는 하나 아직 완전히로드되지 않았거나로드 할 수 없습니다 FALSE를 반환합니다.

    당신이 알아야 할 것 한 가지 이미지가이 0x0 픽셀 이미지 인 경우이 함수는 FALSE를 반환하는 것입니다. 하지만 그 이미지는 매우 드문 일이며, 나는 당신이이 0x0 픽셀 이미지가 아직로드되었는지 확인 할 것입니다 매우 유용한 경우 생각할 수 없다 :)

    먼저 우리는 함수가 모든 이미지 요소에 사용할 수 있습니다 그래서는 HTMLImageElement 프로토 타입에 "IsLoaded 표시"라는 새로운 기능을 첨부합니다.

    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
}

    당신은 SRC 속성 변경에 대한 계획하는 경우 SLaks에 giorgian의 의견 '와 Noyo의 게시물 당이 솔루션은 아마 단지 사파리 모바일에 한 번 검사로 사용할 수 있습니다. 하지만 당신은 그 새로운 SRC 속성을 가진 이미지 요소를 만드는 대신 기존의 이미지 요소의 SRC 속성을 변경하여 해결할 수 있습니다.

  9. 9.이것은 내가 그것을 (나는 또한 DOM에 동적 이미지를 삽입하는 데 필요한) 위의 방법의 조합을 사용하여 크로스 브라우저를 작동있어하는 방법입니다 :

    이것은 내가 그것을 (나는 또한 DOM에 동적 이미지를 삽입하는 데 필요한) 위의 방법의 조합을 사용하여 크로스 브라우저를 작동있어하는 방법입니다 :

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

    주 : isIE 변수에 대한 유효한 부울 상태를 제공해야합니다.

  10. 10.

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

  11. 11.내가 이해로 .complete 속성은 비 표준입니다. 그것은 보편적하지 않을 수 있습니다 ... 나는 IE 절 파이어 폭스에서 다르게 작동하는 것 알 수 있습니다. 나는 완료하면 다음 체크 자바 스크립트 이미지의 수를 로딩하고 있습니다. 파이어 폭스, 이것은 잘 작동하는 것 같다. IE에서는 이미지가 다른 스레드에서로드로 나타나지 않기 때문에. 그것은 내가 image.complete 속성을 확인할 때 나는 image.src 내 할당 사이의 지연을 넣어 경우에만 작동합니다.

    내가 이해로 .complete 속성은 비 표준입니다. 그것은 보편적하지 않을 수 있습니다 ... 나는 IE 절 파이어 폭스에서 다르게 작동하는 것 알 수 있습니다. 나는 완료하면 다음 체크 자바 스크립트 이미지의 수를 로딩하고 있습니다. 파이어 폭스, 이것은 잘 작동하는 것 같다. IE에서는 이미지가 다른 스레드에서로드로 나타나지 않기 때문에. 그것은 내가 image.complete 속성을 확인할 때 나는 image.src 내 할당 사이의 지연을 넣어 경우에만 작동합니다.

    내가 함수가 호출 될 경우에 대해 이야기하고있는 이미지 알고 매개 변수를 전달해야하기 때문에, image.onload를 사용하고 image.onerror 나를 위해 작동하지 않습니다, 중. 그 일을 어떤 방법이 실제로 동일한 기능, 동일한 기능이 아닌 다른 인스턴스를 전달하는 것 때문에 실패 할 것 같다. 그래서 그것으로 통과 값은 항상 이미지를 식별 루프의 마지막 가치 끝입니다. 나는이 문제를 어떤 방식으로 생각할 수 없다.

    사파리와 크롬에, 나는 image.complete 사실보고하고와 naturalWidth는 경우에도 오류 콘솔 쇼 해당 이미지에 대한 404을 설정 ... 그리고 나는 의도적으로 이미지가이 테스트하는 것을 제거. 그러나 잘 파이어 폭스와 IE에 대해 위의 작품.

  12. 12.이 코드 조각은 수정 브라우저 캐싱 문제에 저를 도왔다 :

    이 코드 조각은 수정 브라우저 캐싱 문제에 저를 도왔다 :

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

  13. 13.당신은 이미지가 성공적으로로드되지 않았거나 확인하실 수 있습니다이 자바 스크립트 코드를 사용.

    당신은 이미지가 성공적으로로드되지 않았거나 확인하실 수 있습니다이 자바 스크립트 코드를 사용.

    document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

    이 밖으로 시도

  14. 14.나는 이미지의 전체 부하와의 EventListener에 문제를 많이했다.

    나는 이미지의 전체 부하와의 EventListener에 문제를 많이했다.

    내가 시도하든 결과는 믿을 수 없었다.

    그러나 나는 해결책을 찾아 냈다. 그것은 기술적으로 좋은 하나 아니지만, 지금은 실패한 이미지로드 없었어요.

    제가 한:

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

    대신 이미지 한 시간을로드하는, 난 그냥 그것을 처음과 이벤트 핸들러 저점을 모두 실행 한 후 직접 두 번째로로드합니다.

    내 모든 두통이 사라 졌어요!

    그런데 : 유래에서 너희들은 나에게 이미 더 후, 백 번을 도왔다. 이것을 위해 매우 큰 감사합니다!

  15. 15.이 사람은 나를 위해 벌금을했다 :)

    이 사람은 나를 위해 벌금을했다 :)

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

    16. from https://stackoverflow.com/questions/1977871/check-if-an-image-is-loaded-no-errors-with-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery로 왼쪽 및 오른쪽 마우스 클릭을 구별하는 방법  (0) 2020.09.24
[JQUERY] 모바일 jQuery를 동적으로 추가 된 콘텐츠의 마크 업 향상  (0) 2020.09.24
[JQUERY] ) ($ .when에 Deferreds의 배열에 전달  (0) 2020.09.24
[JQUERY] jQuery를 사용하면 화면에 DIV를 중앙에  (0) 2020.09.24
[JQUERY] jQuery를 사용하여 드롭 다운 목록 (선택 상자)에서 선택한 텍스트를 가져옵니다  (0) 2020.09.24
,

티스토리툴바