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입니다. 이미지가 성공적으로 로드되면 전체 속성 값은 true입니다.

$("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에서 제공하는 방법을 사용하여

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

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Webstorm에서 babel을 사용하여 ES6을 ES5로 자동 트랜스코딩하는 방법

Bootstrap4 + Vue2에서 페이징 쿼리를 구현하는 방법

vue2에서 연결 유지를 사용하는 방법

여기 webpack의 jquery 플러그인에 대한 환경 구성입니다(자세한 튜토리얼)

위 내용은 jQuery에서 이미지 로딩 실패 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!