1

問題

ユーザーが画像のサムネイルをクリックすると、HTML5 データ属性に保存されている画像 URLdata-urlが読み込まれ、その後、残りの機能が続行されます。ただし、jQuery セレクターを使用して画像を読み込む方法がわかりません。

コード

$(document).ready(function() {
    $("img").on("click", function() {

        var url = $(this).data("url");

        $('<img data-url="">').load(function() {
            console.log("loaded");
            $("#wrapper").html('<img src="' + url + '">');
        });
    });
});

最初に読み込まれる画像はサムネイルであり、それがクリックされると、jQuery は属性内の画像が読み込まれるまで待機する必要があることに注意data-urlしてください。ロードされると、そのイメージが に挿入され#wrapperます。

4

2 に答える 2

1

テストされていませんが、次のように機能するはずです。

$(document).ready(function() {
    $("img").on("click", function() {
        // grep the data attribute
        var url = $(this).data("url");
        if(url) {
            // if it is an url, create an image
            var img = $('<img />').appendTo('#Wrapper').hide();
            // set the src with the url
            img.attr("src", url);
            img.load(function() {    
                // if it is loaded, show the image
                // and do whatever you want.
                img.show();
            }); 
        }
    });
});

反対票を投じた後、私はコードを試しましたが、うまくいきました。ここでフィドルを見つけました。

于 2013-01-25T08:12:42.713 に答える
0

私はこのようなことをします

$('#img_id').click(function(){
    $("#wrapper").html('<img src="' + $(this).attr)('data-url') + '?' + new Date().getTime() + '">');
});
于 2013-01-30T19:48:48.353 に答える