Question

我有下面的代码，我需要做的是通过ajax将图像从href加载到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>

非常感谢， ç

Answer 1

您还必须删除当前附加的图像。这是一个click事件和Image而不是附加标记。

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

我可以获取图像并通过ajax加载到div中

4 个答案: