Question

使用javascript我正在尝试加载不在当前页面上的图像（来自图像链接数组），如果它们足够大，则将它们添加到数组中。我正在加载当前页面后通过bookmarklet或firebug控制台执行此操作。使用FF。

我最接近的是以下，但这似乎不起作用，我猜这是因为尺寸测试在图像加载之前运行。显然，我试图通过'onload'解决这个问题是行不通的。我该如何解决这个问题，还是有更好/更简单的方法来完成这项任务？

(function() {

    //create array for the images
    var imageArray = new Array();


    function loadIfBig(x){
            if (x.height > 299 && x.width > 299 && (x.height > 399 || x.width > 399)) {
                imageArray.push(x);
                //dispImage = '<img src=' + x.src + '><br>';
                //document.write('<center>' + dispImage + '</center>');
            }
        return true;
    }


    //given an array of imageLinks:
    for (x in imageLinks){
    //create an image form link and add to array if big enough
        im = document.createElement('img');
        im.src = imageLinks[x];
        im.onload = loadIfBig(im);
    }

    //view results:

    for (x in imageArray){
        disp_image = '<img src='+imageArray[x].src+'><br>';
        document.write('<center>'+disp_image+'</center>');
    }


})();

更新：

谢谢！确定你是对的，我在这里错过了一些愚蠢的东西，但我做了你建议的改变，然后把元素写入loadIfBig，但它似乎没有执行那个功能。下面的当前代码，包括几个示例输入链接：

(function() {
    var imageArray = new Array();

    var imageLinks = ['http://1.bp.blogspot.com/_mfMRTBDpgkM/SwCwu1RPphI/AAAAAAAAJpw/v9YInFBW84I/s1600/800px-San_Francisco_in_ruin_edit2.jpg','http://2.bp.blogspot.com/_mfMRTBDpgkM/SwCwulSZ_yI/AAAAAAAAJpo/NsRcJdpz4Dk/s1600/San_Francisco_PC_59.jpg']

    function loadIfBig(x){
            if (x.height > 299 && x.width > 299 && (x.height > 399 || x.width > 399)) {
                imageArray.push(x);
                dispImage = '<img src=' + x.src + '><br>';
                document.write('<center>' + dispImage + '</center>');
            }
            return true;
    }
    processImages = function(){
        for (x in imageLinks) {
            //create an image from link and add to array if big enough
            im = document.createElement('img');
            im.src = imageLinks[x];
            im.onload = function(){
                loadIfBig(this);
            }
        }

    }       
})();

Answer 1

您的修复无效，因为您实际上是在立即执行它。

im.onload = loadIfBig(im)实际上正在运行该功能。

你可以做的是：

    im.onload = function() {
        loadIfBig(this); 
    }

另一个问题是，在onload回调实际执行之前，你正在运行大图像数组。这需要卡在不同的函数中，并在完成所有onloads后调用。

通过Javascript加载远程图像，然后有选择地添加到数组

1 个答案: