Question

我有一个简单的jQuery揭示功能，可以在点击链接时将图像加载到DIV中。

$(function(){
jQuery(".gallery-item a").click(function(evt) {
    evt.preventDefault();
    jQuery("#imageBox").empty().append(
        jQuery("<img>", { src: this.href})
    );
});
});

有没有办法添加默认图像，以便在加载页面时div中有图像？

Answer 1

$(function () {
    $(".gallery-item a").click(function (evt) {
        evt.preventDefault();
        var box = $("#imageBox").html('<img src="default.jpg" />');

        $("<img>", {src: this.href}).load(function () {
            box.empty().append(this);
        });
    });
});

Answer 2

试试这个：

$(function() {
    jQuery(".gallery-item a").click(function(evt) {
        jQuery("#imageBox").empty().append(
           jQuery("<img />", { src: $(this).attr("href") })
        );
        return false;
    });
});

修改评论：

假设图像的网址在属性“data-urlimage”中标记为“a”

HTML：

<div class="gallery-item">
 <a data-urlimage="/img/myimage.jpg" href="#">click here</a>
</div>

使用Javascript：

$(function() {
    jQuery(".gallery-item a").click(function(evt) {

         var img = new Image();
         img.src = $(this).data("urlimage");
         img.onload = function(){
             jQuery("#imageBox").empty().append(img);
         };

        return false;
    });
});

see image events

编辑：了解如何创建更好的对象“图片”

jQuery揭示 - 默认图像

2 个答案: