jQuery 그림 불 러 오기 실패

본 고 는 주로 페이지 에 있 는 그림 을 불 러 오 는 데 실패 한 후 기본 그림 을 바 꾸 는 몇 가지 방식 을 토론 한다.
중점 이 왔 습 니 다:error 사건 이 거품 이 나 지 않 는 다 는 것 을 기억 하 세 요.
관련 지식 포인트:jquery ready 방법,$("img").error(),img 의 complete 속성,플러그 인 imagesLoaded,이벤트 의뢰,이벤트 캡 처 및 이미지 미리 불 러 오 는 방법 등
1.그림 불 러 오 는 데 실 패 했 습 니 다.기본 그림 으로 바 꾸 기
1.1 그림 바 인 딩 error 이벤트
그림 불 러 오 는 데 실 패 했 을 때 error 이벤트 가 발생 합 니 다.

$("img").on("error", function () {
  $(this).attr("src", "../img/img.jpg");
});

이벤트 속성 onerror 를 권장 하지 않 습 니 다.알 고 있 습 니 다~O.o

동적 으로 추 가 된 그림 이 라면 이 사건 을 다시 연결 해 야 합 니 다.click 이벤트 와 같이 이벤트 의뢰 방식 을 이용 할 수 있 지만 이벤트 의뢰 는 이벤트 거품 의 사고방식 을 이용 하여 하 는 것 이 고 error 사건 은 거품

을 지원 하지 않 습 니 다.

ready 방법 에서 img 에 error 이 벤트 를 연결 하 는 것 을 권장 하지 않 습 니 다.img 에 그림 을 불 러 오 는 데 실 패 했 을 때 img 에 error 이 벤트 를 연결 하지 않 으 면 기본 그림 으로 바 뀌 지 않 습 니 다

1.2 complete 속성 을 이용 하여 판단
그림 불 러 오 는 데 실 패 했 을 때 complete 속성 값 은 false 이 고,불 러 오 는 데 성 공 했 을 때 true 입 니 다.

$("img").each(function () {

  if (!this.complete || (typeof this.naturalWidth == "undefined" && this.naturalWidth == 0) || !this.src) {
    $(this).attr("src", "../img/img.jpg");
  }
});

동적 으로 추 가 된 그림 이 라면 다시 판단 해 야 한다

한 시간 후에 판단 할 수 있 습 니 다.그렇지 않 으 면 새로 추 가 된 사진 이 고 사진 자원 이 아직 요청 되 지 않 았 을 수도 있 습 니 다.이 방식 으로 판단 하면 문제 가 있 을 수 있 습 니 다

HTML 5 에 그림 의 너비 와 높이 를 판단 하 는 두 개의 속성 이 추가 되 었 습 니 다.각각 natural Width 와 natural Height 속성(그림 을 클 라 이언 트 브 라 우 저 에 완전히 다운로드 해 야 판단 할 수 있 습 니 다)

img 의 onready statechange 라 는 속성 은 토론 하지 않 고 브 라 우 저 차이 가 있 습 니 다

1.3 error 이벤트 캡 처 를 이용 하여 처리 합 니 다(전역 판단,동적 으로 추 가 된 요소 도 가능 합 니 다-최 적 화 됩 니 다)

document.addEventListener("error", function (e) {

  var elem = e.target;
  if (elem.tagName.toLowerCase() == 'img') {
    elem.src = "../img/img.jpg";
  }
}, true);

동적 으로 생 성 된 img 라벨 을 들 을 수 있 습 니 다.
1.4 플러그 인 images Loaded 가 제공 하 는 방법 으로 처리 합 니 다.
imagesLoaded 는 주로 핸드폰 끝 폭포 흐름 방식 으로 그림 을 불 러 오 는 데 사용 되 며,그림 불 러 오 는 실 패 를 기본 그림 으로 바 꿀 수도 있 습 니 다.

//    jQuery deferred    
$('img').imagesLoaded()
    .always(function (instance) { // always  ，          （      ）   
      console.log('all images loaded');
    })
    .done(function (instance) { // done  ，             
      console.log('all images successfully loaded');
    })
    .fail(function (instance) { // fail  ，          ，                
      console.log('all images loaded, at least one is broken');
    })
    .progress(function (instance, image) { // progress  ，                
      var result = image.isLoaded ? 'loaded' : 'broken'; //             
      image.img.src = image.isLoaded ? image.img.src : "../img/img.jpg";
      console.log('image is ' + result + ' for ' + image.img.src);
    });

동적 으로 추 가 된 그림 이 라면,다시 판단 해 야 합 니까?
2.그림 미리 불 러 오 는 방법

//        ，        ，             
function preloadimages(arr) {
  var newimages = [];
  var arr = (typeof arr != "object") ? [arr] : arr; //         
  for (var i = 0,len = arr.length; i < len; i++) {
    newimages[i] = new Image();
    newimages[i].src = arr[i];
  }
}

총결산
위 에서 말 한 것 은 소 편 이 소개 한 jQuery 그림 로드 실패 로 기본 그림 을 교체 하 는 방법 을 모 은 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!