[JQUERY] jQuery는 완전한 콜백으로 이미지를로드합니다

jQuery는 완전한 콜백으로 이미지를로드합니다

해결법

1. ---

   1.표시하기 전에로드하기를 원한다면 다음과 같이 많은 것을 많이 다듬을 수 있습니다.

   표시하기 전에로드하기를 원한다면 다음과 같이 많은 것을 많이 다듬을 수 있습니다.

   $(document).ready(function() {
       var newImage = "images/002.jpg"; //Image name
   
       $("a.tnClick").click(function() {
         $("#myImage").hide() //Hide it
           .one('load', function() { //Set something to run when it finishes loading
             $(this).fadeIn(); //Fade it in when loaded
           })
           .attr('src', newImage) //Set the source so it begins fetching
           .each(function() {
             //Cache fix for browsers that don't trigger .load()
             if(this.complete) $(this).trigger('load');
           });
       });
   });
   

   .one () 호출은 .load () 만 한 번만 화재 만 해줍니다. 그래서 중복 된 페이드 인이 없습니다. 끝에있는 .each ()는 일부 브라우저가 캐시에서 가져온 이미지에 대한로드 이벤트를 실행하지 않기 때문에 이것은 게시 한 예제의 폴링이 수행하려고하는 것입니다.

2. ---

   2.이미지가 브라우저의 캐시에서 이미지가 발견되면 이미지가 발견되면 이미지에 대한로드 이벤트를 사용할 때는주의해야합니다. 크롬은 예상대로 이벤트를 해제하지 않습니다.

   이미지가 브라우저의 캐시에서 이미지가 발견되면 이미지가 발견되면 이미지에 대한로드 이벤트를 사용할 때는주의해야합니다. 크롬은 예상대로 이벤트를 해제하지 않습니다.

   이 문제에 직면해야했기 때문에 DOM 특성이 완료된 것을 확인함으로써 해결되었습니다 (대부분의 주요 브라우저에서 일하고 있다고 말했습니다) : TRUE와 같으면 이전에 바인딩 된 'LOAD'이벤트를 바인딩 해제했습니다. 예제를 참조하십시오.

   $("#myimage").attr("src","http://www.mysite.com/myimage.jpg").load(doSomething);
   
   if ($("#myimage").get(0).complete) {
   
       // already in cache?
               $("#myimage").unbind("load");
               doSomething();
   
   
   }
   

   도움이 되었기를 바랍니다

3. ---

   3.이 기능을 원했고 페이지가 렌더링되면 모든 이미지를로드해야합니다. 내 이미지는 Amazon S3에 있으며 큰 PhotoGallery가 있으며, 불필요한 요청이 많이 있습니다. 나는 여기에서 그것을 처리하기 위해 빠른 jQuery 플러그인을 만들었습니다.

   이 기능을 원했고 페이지가 렌더링되면 모든 이미지를로드해야합니다. 내 이미지는 Amazon S3에 있으며 큰 PhotoGallery가 있으며, 불필요한 요청이 많이 있습니다. 나는 여기에서 그것을 처리하기 위해 빠른 jQuery 플러그인을 만들었습니다.

   $("#image-1").loadImage('/path/to/new/image.jpg',function(){  
     $(this).css({height:'120px'});//alter the css styling after the image has loaded
   });
   

   따라서 기본적으로 사용자가 사진 집합을 나타내는 썸네일을 클릭 할 때마다 해당 시점에서 다른 이미지를로드합니다. 콜백을 사용하면 이미지가로드 된 후 CSS를 변경할 수 있습니다.

4. ---

   4.이걸로 해봐?

   이걸로 해봐?

   doShow = function() {
     if ($('#img_id').attr('complete')) {
       alert('Image is loaded!');
     } else {
       window.setTimeout('doShow()', 100);
     }
   };
   
   $('#img_id').attr('src', 'image.jpg');
   doShow();
   

   위의 것처럼 보이는 것처럼 보입니다 ...

from https://stackoverflow.com/questions/2392410/jquery-loading-images-with-complete-callback by cc-by-sa and MIT license