이미지가 로드되었는지 확인하는 jQuery 메서드 요약

이미지가 로드되었는지 확인하는 jQuery 메서드 요약_jquery

WBOY

풀어 주다： 2016-05-16 15:46:15

원래의

1321명이 탐색했습니다.

슬라이드 쇼, 확대/축소 등의 이미지 처리는 모두 모든 이미지가 완료된 후에 작동됩니다.

오늘은 모든 이미지가 로드되었는지 확인하는 방법을 살펴보겠습니다. 로드가 완료되기 전에 로드 중인 gif 이미지를 사용하여 로드 중임을 나타낼 수 있습니다.

1. 일반적인 방법

img의 로드 방법을 듣고 이미지가 로드될 때마다 비교해 보세요. 키코드는 다음과 같습니다.

var num = $img.length;

$imgs.load(function() {
  num--;
  if (num > 0) {
    return;
  }
  console.log('load compeleted');
}

로그인 후 복사

2. jQuery에서 Deferred 객체를 사용하세요

Deferred object는 jQuery 1.5.0 버전에서 도입된 새로운 기능입니다. 자세한 소개는 공식 문서를 참조하세요.

간단히 말하면 Deferred 객체는 jQuery의 콜백 함수 솔루션으로, 시간이 많이 걸리는 작업을 처리하는 방법에 대한 문제를 해결하고 해당 작업에 대한 더 나은 제어 기능과 통합 프로그래밍 인터페이스를 제공합니다.

Ruan Yifeng에는 지연 객체를 소개하는 기사가 더 자세히 작성되어 있어 시작하는 데 더 유용합니다.

jQuery의 deferred object에 대한 자세한 설명

여기서는 다음을 사용했습니다.

deferred.resolve(): Deferred 객체를 해결하고 지정된 인수로 doneCallback을 호출합니다.
deferred.when(): 하나 이상의 개체(일반적으로 비동기 이벤트를 나타내는 지연된 개체)를 기반으로 콜백 함수를 실행하는 방법을 제공합니다.
deferred.done(): Deferred 객체가 해결될 때 호출할 핸들러를 추가합니다.

키 코드:

var defereds = [];

$imgs.each(function() {
  var dfd = $.Deferred();

  $(this).load(dfd.resolve);
  defereds.push(dfd);
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

로그인 후 복사

기본 아이디어:

사진이 로드될 때마다 모든 Deferred가 완료되면 when()이 done()을 실행합니다.

참고: $.when에서 지원되는 매개변수는 $.when(dfd1, dfd2, dfd3, ...)이므로 여기서는 Apply를 사용하여 배열 매개변수를 허용합니다.

이미지 로드 여부 확인 완료

Google 덕분에 유용한 방법을 찾았습니다.

qim=new Image();//新建一个图片；
qim.src=$preload;//图片地址是你准备要加载的地址；
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了
}

로그인 후 복사

나중에 발견한 방법

$("").load(function(){...});

로그인 후 복사

선택자는 이미지의 ID나 클래스이고, 함수의 메소드는 이미지가 로드된 후 실행되는 콜백 함수입니다. 그런데 많이 시도해 봤는데 전혀 그렇지 않습니다. 올바른 해결책은 다음과 같습니다.

//jquery的方式
$("#imageId").load(function(){
  alert("加载完成！");
});

로그인 후 복사

JS를 사용하는 것이 가장 좋다고 친구가 말했는데, 방법은 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

document.getElementById("img2").onload=function(){}

온라인에서 코드 찾기
예시

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象，实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
   callback.call(img);
   return; // 直接返回，不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
  };
};

로그인 후 복사

다음은 여러 이미지에 대한 로딩 판단입니다.

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //图片加载错误，加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

로그인 후 복사

이 방법을 사용하면 window.onload의 단점을 피할 수 있지만, 코드가 약간 복잡하고 window.onload보다 성능이 훨씬 좋습니다.