イメージを取得し、ajax経由でdivにロードすることができます

Question

私は以下のコードを持っています、そして、私がする必要があるのは、hrefからajax経由でdivにイメージをロードすることです。私はload（）がこのようなイメージをロードできないと信じていますか？

<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> 

多くのおかげで、 C

Answer 1

現在追加されているイメージを削除します。ここではマークアップを追加するのではなく、クリックイベントとイメージを使用します。

$('#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

が、これは、私もまた、初心者のビットんだ、私がしようと最初の事のようになります。あなたはまたに持って

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

Answer 3

あなたは動的に何をする必要があなたの親要素その後、

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

は、いくつかのイベントであれば上にある

がimg_divを言うのimg src属性に変更されたDOM を使用する画像を変更したい場合この画像を変更したい

im.src = 'image_path2' 

Answer 4

いいえ。メッシーしかしそれは完全に動作します。背景画像として画像を追加するような微妙な調整がいくつかあります。ここにあり、私はそれが他の誰かを助けることを願っています！みなさん、ありがとう。

<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>