使用 jQuery 加载存储在 HTML5 数据标签中的图像 URL

Question

>问题

当用户单击图像的缩略图时，应加载存储在HTML5数据属性data-url中的图像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。

Answer 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();
            }); 
        }
    });
});

Answer 2

我会做这样的事情

$('#img_id').click(function(){
    $("#wrapper").html('<img src="' + $(this).attr)('data-url') + '?' + new Date().getTime() + '">');
});