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

Question

问题

当用户单击图像的缩略图时，应加载存储在 HTML5 数据属性中的图像 URL data-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() + '">');
});