[JQUERY] jQuery가있는 이미지로드 및 DOM에 추가하십시오.

jQuery가있는 이미지로드 및 DOM에 추가하십시오.

해결법

1. ---

   1.

   $('<img src="'+ imgPath +'">').load(function() {
     $(this).width(some).height(some).appendTo('#some_target');
   });
   

   여러 이미지에 대해 원한다면 다음을 수행하십시오.

   function loadImage(path, width, height, target) {
       $('<img src="'+ path +'">').load(function() {
         $(this).width(width).height(height).appendTo(target);
       });
   }
   

   사용하다:

   loadImage(imgPath, 800, 800, '#some_target');
   

2. ---

   2.페이지에 추가하기 전에 이미지를 미리로드 할 때 사용하는 코드가 있습니다.

   페이지에 추가하기 전에 이미지를 미리로드 할 때 사용하는 코드가 있습니다.

   또한 이미지가 캐시에서 이미로드 된지 확인하는 것도 중요합니다 (IE 용).

       //create image to preload:
       var imgPreload = new Image();
       $(imgPreload).attr({
           src: photoUrl
       });
   
       //check if the image is already loaded (cached):
       if (imgPreload.complete || imgPreload.readyState === 4) {
   
           //image loaded:
           //your code here to insert image into page
   
       } else {
           //go fetch the image:
           $(imgPreload).load(function (response, status, xhr) {
               if (status == 'error') {
   
                   //image could not be loaded:
   
               } else {
   
                   //image loaded:
                   //your code here to insert image into page
   
               }
           });
       }
   

3. ---

   3.

   var img = new Image();
   
   $(img).load(function(){
   
     $('.container').append($(this));
   
   }).attr({
   
     src: someRemoteImage
   
   }).error(function(){
     //do something if image cannot load
   });
   

4. ---

   4.이미지 경로를 얻은 후 다음과 같은 방법을 시도하십시오.

   이미지 경로를 얻은 후 다음과 같은 방법을 시도하십시오.

5. ---

   5.나는 당신이 당신의 이미지를 정의한다고 상상한다 :

   나는 당신이 당신의 이미지를 정의한다고 상상한다 :

   <img id="image_portrait" src="" alt="chef etat"  width="120" height="135"  />
   

   이 태그에 대한 이미지를로드 / 업데이트하고 attr (너비, 높이)을 변경 / 설정할 수 있습니다.

   var imagelink;
   var height;
   var width;
   $("#image_portrait").attr("src", imagelink);
   $("#image_portrait").attr("width", width);
   $("#image_portrait").attr("height", height);
   

6. ---

   6.jQuery 3.x는 다음과 같은 것을 사용합니다.

   jQuery 3.x는 다음과 같은 것을 사용합니다.

   $('<img src="'+ imgPath +'">').on('load', function() {
     $(this).width(some).height(some).appendTo('#some_target');
   });
   

from https://stackoverflow.com/questions/10863658/load-image-with-jquery-and-append-it-to-the-dom by cc-by-sa and MIT license