이미지로드 감지

이미지로드 감지

---

이미지가 jQuery로로드되면 감지 할 수 있습니까?

---

다음 .load()과 같이 이벤트 핸들러를 사용할 수 있습니다 .

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

소스 를 설정 하기 전에 첨부 해야 합니다. 그렇지 않으면 수신 대기하는 핸들러를 첨부하기 전에 이벤트가 발생했을 수 있습니다 (예 : 캐시에서로드).

이것이 불가능 하다면 ( src애프터 바인딩 설정 ),로드되었는지 확인하고 다음과 같이 직접 실행하십시오.

$("#myImg").load(function() {
  alert('I loaded!');
}).each(function() {
  if(this.complete) $(this).load();
});

---

일반 자바 스크립트를 사용하는 것만 큼 간단합니다.

  // Create new image
var img = new Image();

  // Create var for image source
var imageSrc = "http://example.com/blah.jpg";

  // define what happens once the image is loaded.
img.onload = function() {
    // Stuff to do after image load ( jQuery and all that )
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded.
};

  // Attach the source last. 
  // The onload function will now trigger once it's loaded.
img.src = imageSrc;

---

나는 또한 이것을 오랫동안 연구 해 왔으며이 플러그인이 이것을 훌륭하게 도와주는 것을 발견했습니다 : https://github.com/desandro/imagesloaded

엄청나게 많은 코드처럼 보이지만 ... 이미지가로드되었을 때 확인할 다른 방법을 찾지 못했습니다.

---

jQuery on ( 'load') 함수를 사용하는 것이 이미지가로드되었는지 확인하는 올바른 방법입니다. 그러나 이미지가 이미 캐시에 있으면 on ( 'load') 함수가 작동하지 않습니다.

var myImage = $('#image_id');
//check if the image is already on cache
if(myImage.prop('complete')){ 
     //codes here
}else{
     /* Call the codes/function after the image is loaded */
     myImage.on('load',function(){
          //codes here
     });
}

---

jquery를 사용하면 쉽습니다.

$('img').load(function(){
   //do something
});

시도한 경우 :

$('tag')html().promise().done(function(){ 
   //do something
}) ;

그러나 사진이로드되었는지 확인하지 않습니다. 코드가로드되면 실행됩니다. 그렇지 않으면 코드가 완료되었는지 확인한 다음 img로드 기능을 실행하고 사진이 실제로로드되었는지 확인할 수 있습니다. 그래서 우리는 두 가지를 조합합니다.

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
   $('img').load(function(){
     //do something like show fadein etc...
   });
}) ;

---

나는 이것이 당신에게 약간 도움이 될 것이라고 생각합니다.

    $('img').error(function(){
        $(this).attr( src : 'no_img.png');
 })

따라서로드되면 원본 이미지가 표시됩니다. 기타-충돌 이미지 또는 404 HTTP 헤더가있는 사실을 포함하는 이미지가 표시됩니다.

참조 URL : https://stackoverflow.com/questions/3537469/detect-image-load