我可以获取图像并通过ajax加载到div中吗 [英] Can I get the image and load via ajax into div

问题描述

我有下面的代码，我需要做的是通过ajax将href中的图像加载到div中......感谢任何帮助.我相信 load() 不能像这样加载图像?

I have the code below and what I need to do is load the image from the href into a div via ajax... Any help appreciated. I believe that load() can't load images like this?

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

非常感谢，

推荐答案

您还必须删除当前附加的图像.这是一个点击事件和图像，而不是附加标记.

You have to also remove the currently appended image. Here it is with a click event and Image instead of appending markup.

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

这篇关于我可以获取图像并通过ajax加载到div中吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！