1

リンクがクリックされたときに画像をDIVにロードする本当にシンプルなjQueryリビール関数があります。

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

デフォルトの画像を追加して、ページが読み込まれたときにdivに画像が既に存在するようにする方法はありますか？

4

2 に答える 2

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);
        });
    });
});
于 2012-09-03T13:16:42.463 に答える
0

これを試して：

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

コメント用に編集:

画像のURLが属性「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;
    });
});​

画像イベントを見る

編集：より良いオブジェクト「画像」を作成する方法を参照してください

于 2012-09-03T13:19:34.947 に答える