jQuery 이미지 로딩 실패, 기본 이미지 교체 방법

이 글에서는 주로 jQuery 이미지 로딩 실패 시 기본 이미지를 교체하는 방법과 관련 지식에 대한 요약을 소개합니다: jquery의 Ready 메소드, $("img").error(), img의 완전한 속성, 플러그인 ImagesLoaded, 이벤트 위임, 이벤트 캡처 및 이미지 사전 로딩 방법은 필요한 친구들이 참고할 수 있습니다.

여기서 중요한 점이 있습니다. 오류 이벤트가 발생하지 않는다는 점을 기억하세요.

관련 지식 포인트: jquery의 준비 메소드, $("img").error(), img의 전체 속성, 플러그인 ImagesLoaded, 이벤트 위임, 이벤트 캡처 및 이미지 사전 로딩 메소드 등

1. 로딩에 실패하면 기본 이미지로 교체하세요

1.1 이미지에 오류 이벤트를 바인딩합니다

이미지가 로드되지 않으면 오류 이벤트가 트리거됩니다

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

• 이벤트 onerror 속성은 권장되지 않습니다. ~O.o

• 동적으로 추가된 이미지인 경우 이 이벤트를 다시 바인딩해야 합니다. 클릭 이벤트에 이벤트 위임을 사용할 수 있지만 이벤트 위임은 이벤트 버블링 아이디어를 기반으로 하며 오류 이벤트는 버블링을 지원하지 않습니다

• ready 메소드에서 오류 이벤트를 img에 바인딩하는 것은 권장되지 않습니다. img가 이미지 로드에 실패하면 img는 오류 이벤트를 바인딩하지 않으므로 기본 이미지가 교체되지 않습니다.

1.2 Complete 속성을 사용하여

이미지 로드에 실패하면 전체 속성 값은 false입니다. 이미지가 성공적으로 로드되면 전체 속성 값은 false입니다.

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

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

• 동적으로 추가된 사진인 경우에도 다시 판단해야 합니다

• 잠시 후에 다시 판단할 수 있습니다. 그렇지 않으면 방금 사진을 추가한 후에 사진 리소스가 요청되지 않을 수 있습니다. 이 방법으로 판단하는 데 문제가 있습니다.

• HTML 5에서는 두 가지 새로운 속성을 추가하여 판단합니다. 이미지의 너비와 높이, 즉 naturalWidth 및 naturalHeight 속성(이미지 이후 클라이언트 브라우저에 완전히 다운로드되어야 함) 판단으로만)

• img의 onreadystatechange 속성은 논의되지 않으며 브라우저 차이가 있습니다

1.3 오류 이벤트 캡처를 사용하여 처리합니다(전체 판단, 동적으로 추가된 요소도 최적의 솔루션이 될 수 있음)

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

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

동적으로 생성된 img 태그를 모니터링할 수 있습니다

1.4 플러그인에서 제공하는 방법을 사용합니다.

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

If 동적으로 추가된 이미지이므로 다시 판단해야 합니다

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];
  }
}

관련 권장:

Javascript 구현 비동기 이미지 업로드 방법 예

JS 이미지 전환 슬라이드쇼 전환 효과

js에서 무작위 전환 배경 이미지를 설정하는 방법

위 내용은 jQuery 이미지 로딩 실패, 기본 이미지 교체 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!