Могу ли я получить изображение и загрузить через AJAX в DIV

Question

У меня есть код ниже, и мне нужно загрузить изображение с href в div через ajax ... Любая помощь приветствуется.Я считаю, что 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

Хорошо.Грязно, но работает отлично.Несколько настроек, например, добавление изображений в качестве фоновых изображений.Вот оно, и я надеюсь, что это поможет кому-то еще!Большое спасибо всем.

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

Answer 4

Если вы хотите изменить изображение динамически, используйте DOM Что вам нужно сделать, это изменить атрибут img src

скажем, img_div - ваш родительский элемент, тогда

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

на каком-либо событии, если вы хотите изменить это изображение

im.src = 'image_path2'