Załaduj obraz z jQuery i dołączyć go do DOM

Question

Próbuję załadować obraz z danego linku

var imgPath = $(imgLink).attr('href');

i dołączyć go do strony, więc mogę włóż ją do danego element dla przeglądarki obrazów. Mimo że przeszukano Stackoverflow i jQuery dokumentów bez końca, nie mogę dowiedzieć się go.

Po załadować obraz, chcę ustawić różne wartości do niego, jak szerokość, wysokość itp

Aktualizacja:

To jest to, co mam. Problem, który mam, polega na tym, że nie mogę uruchomić funkcji jQuery na elemencie img.

function imagePostition(imgLink) { 

// Load the image we want to display from the given <a> link  
// Load the image path form the link 
var imgPath = $(imgLink).attr('href'); 

// Add image to html 
$('<img src="'+ imgPath +'" class="original">').load(function() { 

    $(imgLink).append(this); 

    var img = this; 

    // Resize the image to the window width 
    // http://stackoverflow.com/questions/1143517/jquery-resizing-image 

    var maxWidth = $(window).width();  // window width 
    var maxHeight = $(window).height();  // window height 
    var imgWidth = img.width;    // image width 
    var imgHeight = img.height;    // image height 
    var ratio = 0;       // resize ration 
    var topPosition = 0;     // top image position 
    var leftPostition = 0;     // left image postiton 

    // calculate image dimension 

    if (imgWidth > maxWidth) { 
     ratio = imgHeight/imgWidth; 
     imgWidth = maxWidth; 
     imgHeight = (maxWidth * ratio); 
    } 
    else if (imgHeight > maxHeight) { 
     ratio = imgWidth/imgHeight; 
     imgWidth = (maxHeight * ratio); 
     imgHeight = maxHeight; 
    } 

    // calculate image position 

    // check if the window is larger than the image 
    // y position 
    if(maxHeight > imgHeight) { 
     topPosition = (maxHeight/2) - (imgHeight/2); 
    } 
    // x position 
    if(maxWidth > imgWidth) { 
     leftPostition = (maxWidth/2) - (imgWidth/2); 
    } 

    $(imgLink).append(img); 

    // Set absolute image position 
    img.css("top", topPosition); 
    img.css("left", leftPostition); 

    // Set image width and height 
    img.attr('width', imgWidth); 
    img.attr('height', imgHeight); 

    // Add backdrop 
    $('body').prepend('<div id="backdrop"></div>'); 

    // Set backdrop size 
    $("#backdrop").css("width", maxWidth); 
    $("#backdrop").css("height", maxHeight); 

    // reveal image 
    img.animate({opacity: 1}, 100) 
    img.show() 

}); 

}; 

Answer 1

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

Jeśli chcesz zrobić kilka zdjęć, a następnie:

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

Zastosowanie:

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

Answer 2

po uzyskać ścieżkę obrazu, spróbuj jednego z poniższych sposobów

1. (jak trzeba ustawić więcej attr niż tylko SRC) budować html i zastąpić w regionie docelowym

   $('#target_div').html('<img src="'+ imgPaht +'" width=100 height=100 alt="Hello Image" />'); 
   

2. może trzeba dodać pewne opóźnienia, jeżeli zmiana „src” attr

   setTimeout(function(){///this function fire after 1ms delay 
        $('#target_img_tag_id').attr('src',imgPaht); 
   }, 1); 
   

Answer 3

sobie wyobrazić, że można zdefiniować swój obraz coś takiego:

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

można po prostu załadować/zaktualizować obraz tego tagu i chage/set atts (szerokość, wysokość):

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

Answer 4

var img = new Image(); 

$(img).load(function(){ 

    $('.container').append($(this)); 

}).attr({ 

    src: someRemoteImage 

}).error(function(){ 
    //do something if image cannot load 
}); 

Answer 5

Oto kod używam, kiedy chcę wczytywać obrazy przed dołączeniem ich do strona.

Ważne jest również sprawdzenie, czy obraz jest już załadowany z pamięci podręcznej (dla 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 

      } 
     }); 
    }