Puis-je obtenir l'image et charger via ajax dans div

Question

J'ai le code ci-dessous et ce que je dois faire est de charger l'image de la href dans une div via ajax ... Toute aide appréciée. Je crois que load() ne peut pas charger des images comme ça?

<ul id="list"> 
    <li class="list-item-1"><a href="images/image1.jpg">Image 1</a></li> 
    <li class="list-item-2"><a href="images/image2.jpg">Image 2</a></li> 
    <li class="list-item-3"><a href="images/image3.jpg">Image 3</a></li> 
    <li class="list-item-4"><a href="images/image4.jpg">Image 4</a></li> 
    </ul> 
<div id="image-holder"></div> 

Un grand merci, C

Answer 1

Vous devez aussi supprime l'image actuellement ajoutée. Ici c'est avec un événement click et Image au lieu d'ajouter un balisage.

$('#list li a').click(function() { 
    var url = $(this).attr('href'), 
    image = new Image(); 
    image.src = url; 
    image.onload = function() { 
     $('#image-holder').empty().append(image); 
    }; 
    image.onerror = function() { 
     $('#image-holder').empty().html('That image is not available.'); 
    } 

    $('#image-holder').empty().html('Loading...'); 

    return false; 
}); 

Answer 2

Ce serait la première chose que je voudrais essayer, je suis aussi un peu un débutant aussi bien que:

var image = $('<img></img>'); 
image.attr('src', 'images/image1.jpg'); 
$('#image-holder').append(image); 

Answer 3

Si vous voulez changer l'image utiliser dynamiquement dom Ce que vous devez faire est de changer l'attribut img src

disent img_div est votre élément parent puis

var im = document.createElement('img'); 
im.src = 'image_path1'; 
img_div.appendChild(im); 

sur un événement si vous voulez changer cette image

im.src = 'image_path2' 

Answer 4

OK. Sale mais ça fonctionne parfaitement. Quelques modifications comme ajouter les images comme images de fond. C'est ici et j'espère que ça aide quelqu'un d'autre! Merci beaucoup à tous.

<script type="text/javascript"> 
$(function(){ 
    var list = $("#list"); 
    var li = list.children(); 
    var lengthMinusOne = li.length - 1; 
    var index = 0; 
    var num = $("#list li").length; 
    var prevLi = $(li[0]).css("background-color", "gray"); 

    $("#next").click(function(){ 
     index++; 
     if (index > lengthMinusOne) index = 0; 
     prevLi.css("background-color","white"); 
     prevLi = $(li[index]).css("background-color", "gray"); 

     //Trigger a href click 
     $(prevLi).children('a').trigger('click'); 

     //Display class in console 
     var myClass = $(prevLi).attr("class"); 
     console.log(myClass); 
    }); 
    $("#prev").click(function(){ 
     index--; 
     if (index < 0) index = lengthMinusOne; 
     prevLi.css("background-color","white"); 
     prevLi = $(li[index]).css("background-color", "gray"); 

     //Trigger a href click 
     $(prevLi).children('a').trigger('click'); 

     //Display class in consol 
     var myClass = $(prevLi).attr("class"); 
     console.log(myClass); 
    }); 


    //Loader 
    loader = $('#loader'); 
    loader.hide(); 
    var firstImg = $('<img />'); 
    $(firstImg).attr('src',$('#list li a').attr('href')); 
    $('#image-holder').append(firstImg); 

    //get image and load into div 
    $('#list li a').click(function(event) {       
     //Add class to image within holder 
     oldImg = $('#image-holder img').addClass('old'); 
     newImg = $('<img />'); 

     $(newImg).attr('src',$(this).attr('href')); 
     //remove old image and show loader 
     $(oldImg).fadeOut().remove(); 
     loader.show(); 

     $(newImg).bind({ 
      load: function() {   
       //console.log("Image loaded"); 
       //Hide loader before fading in image 
       loader.hide(); 
       $('#image-holder').append(newImg).hide().fadeIn(1300); 
      }, 
      error: function() { 
       //console.log("Error thrown, image didn't load, probably a 404."); 
      } 
     }); 

     event.preventDefault(); 
    }); 


}) 
</script>