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