Question

alert('loaded');永远不会在第一个代码段中执行 2个代码段之间的唯一区别是alert('setting src..');在第一个示例中被注释掉，但在第二个示例中留下了。
为什么在第一个例子中没有执行alert('loaded');？

当提交表单Utils.imgExists()时，我有一个包含表单的html文件 Utils.imgExists()在JS文件中声明，包含在html文档中。

 <form action="anotherPage.html" method="get" onsubmit="return Utils.imgExists('http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg')">
       <div id="imageInput">
           <input 
               type="text" 
               id="image" 
               name="image" 
               value="http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg"
               title="Paste an image URL e.g http://server.com/path/to/image.jpg"/>
    </div>

    <button type="submit">Submit</button>
</form>

Utils.js中的

Utils.imgExists()：

var Utils = {
    imgExists: function(url){
        function imgExists(url, callback) {
            alert('in imgExists');

            var img = new Image();

            img.onerror = function() {
                alert('error');
                callback(false);
            };

            img.onload = function () {
                alert('loaded');
                callback(true);
            };

            img.src = url;
            //alert('setting src..');
        }

        function checkImage(exists) {
            alert("Image exists: " + exists);
        }

        imgExists('http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg', checkImage);
    }
};

这是第二个例子：

var Utils = {
    imgExists: function(url){
        function imgExists(url, callback) {
            alert('in imgExists');

            var img = new Image();

            img.onerror = function() {
                alert('error');
                callback(false);
            };

            img.onload = function () {
                alert('loaded');
                callback(true);
            };

            img.src = url;
            alert('setting src..');
        }

        function checkImage(exists) {
            alert("Image exists: " + exists);
        }

        imgExists('http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg', checkImage);
    }
};

Answer 1

这是基于@nzn提供的jsfiddle加载：http://jsfiddle.net/donce17/5udtC/5596/

function imgExists(url, callback) {
    alert('in imgExists');

    var img = new Image();

    img.onerror = function() {
        alert('error');
        callback(false);
    };

    img.onload = function () {
        alert('loaded');
        callback(true);
    };

    img.src = url;
    //alert('setting src..');
}

function checkImage(exists) {
    alert("Image exists: " + exists);
}

imgExists('http://www.nasa.gov/images/content/711375main_grail20121205_4x3_946-710.jpg', checkImage);

代码未在img.onload中执行

1 个答案: