JavaScript 加载图像

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 处理程序。当您在图像(DOM 图像元素)上设置 src 属性时，它就会开始加载资源。当资源加载完毕后，图片会触发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

});

做

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 引用。当然，当资源加载时，您将不得不隐藏进度条等...而不仅仅是提醒消息。