загрузить удаленные изображения через Javascript, а затем выборочно добавить в массив - PullRequest
Новая
       3

загрузить удаленные изображения через Javascript, а затем выборочно добавить в массив

2 голосов
/ 27 июня 2010

Используя javascript, я пытаюсь загрузить изображения не на текущей странице (из массива ссылок на изображения) и, если они достаточно велики, добавить их в массив. Я выполняю это после загрузки текущей страницы, хотя букмарклет или консоль 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);
            }
        }

    }       
})();

1 Ответ

0 голосов
/ 27 июня 2010

Ваше исправление не работает, потому что вы выполняете его немедленно.

im.onload = loadIfBig(im) на самом деле работает функция.

Что вы можете сделать, это что-то вроде: 

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

Другая проблема заключается в том, что вы пробегаете массив больших изображений до того, как обратные вызовы onload действительно будут выполнены. Это нужно вставить в другую функцию и вызвать после того, как все загрузки завершены.

...