Question

我有一个字段和一个图像容器。

在此容器中有一个默认图像。

我希望用户放置一个图像的链接然后提交它，然后将图像添加到默认图像的src属性。

我的问题是，如何加载图片，并在此期间向用户显示进度条，加载完成后，隐藏URL。我现在主要关心的是如何加载资源。

现在我写了这个脚本：

jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button

    $("#url-logo-progress").show(); // show the progress bar to it

    var logoUrl = $("#logo-url").val(); // pick up the inserted URL

    $("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image

});

虽然我需要这样的东西：

$.imageLoad({ url : "url/to/image.jpg", 
    complete : function(){
    alert("upload finished!");
    });

编写回调和状态没有问题，但我不知道如何加载资源。

提前致谢

Answer 1

你只是错过了onload处理程序。在图像上设置src属性（DOM图像元素）时，它开始加载资源。加载资源后，图像将触发onload事件。

所以，而不是

jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button

    $("#url-logo-progress").show(); // show the progress bar to it

    var logoUrl = $("#logo-url").val(); // pick up the inserted URL

    $("#image-width").attr("src", logoUrl); // and put the URL into the src attribute of the image

});

DO

jQuery("#logo-file-upload").on("click", function(){
// when user clicks the submit button

    $("#url-logo-progress").show(); // show the progress bar to it

    var logoUrl = $("#logo-url").val(); // pick up the inserted URL

    var image = $("#image-width")[0];

    image.onload = function(){alert("upload finished!");}

    image.src = logoUrl; // and put the URL into the src attribute of the image

});

这样你就可以直接处理对Image DOM元素的引用，而不是使用jQuery引用。当然，在加载资源时，您必须隐藏进度条等...而不仅仅是提醒消息。

加载图片的Javascript

1 个答案: