Может кто-нибудь объяснить эту функцию загрузчика изображений, включая обратный вызов - PullRequest
Новая
       6

Может кто-нибудь объяснить эту функцию загрузчика изображений, включая обратный вызов

1 голос
/ 03 февраля 2012

Код: 

function loadImages(sources, callback){
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}
window.onload = function(images){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var sources = {
        darthVader: "darth-vader.jpg",
        yoda: "yoda.jpg"
    };
    loadImages(sources, function(images){
        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
    });
};

Путаница 

function loadImages(sources, callback){

3: в эту функцию передаются два параметра, один из которых сам по себе является функцией: callback 

    var images = {};

4: наконец, для изображений установлено значение ... nul (?) 

    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function(){
            if (++loadedImages >= numImages) {
                callback(images);

5: в этот момент мой мозг смущен .... 

            }
        };
        images[src].src = sources[src];
    }
}

window.onload = function(images){

Как я понимаю,

1: параметр "images" пуст. 

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var sources = {
        darthVader: "darth-vader.jpg",
        yoda: "yoda.jpg"
    };

    loadImages(sources, function(images){

2: теперь его передают в качестве параметра этим встроенным функциям - все еще без указанияв любом месте ... теперь он якобы вызывает метод loadImages, который определен выше ... 

        context.drawImage(images.darthVader, 100, 30, 200, 137);

где он получает контекст для darthvader?я вижу только "источники", у которых darthVader выше 

        context.drawImage(images.yoda, 350, 55, 93, 104);
    });
};

source: http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

EDIT: QUESTIONS ::

с шага 4: до 5: (особенново втором цикле for) создается новый массив (images [src]), который передается в функцию callback (), которая определяется как встроенная непосредственно перед шагом 2 :.Где он на самом деле получает изображения, которые были в источнике?

Ответы [ 3 ]

1 голос
/ 03 февраля 2012

Я добавил комментарии к вашему встроенному JavaScript: 

function loadImages(sources, callback){
    //  "{}" is object literal syntax.  images is a new empty object, not null.
    var images = {};
    var loadedImages = 0;
    var numImages = 0;

    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        //  In a for..in loop, the variable (src) is the key of the object (sources).
        //  The value is retrieved via object[key] (eg, sources[src]).

        //  In the first iteration of this loop, the images object is given a
        //  property of "darthVader", and "yoda" in the second iteration.
        //  Note: images[src] does not create a new array, but adds a property
        //  named the value of src to images using square bracket notation.
        images[src] = new Image();
        images[src].onload = function() {
            if (++loadedImages >= numImages) {
                callback(images);  // "callback" is passed images as a parameter
            }
        };
        images[src].src = sources[src];
    }
}

//  The "images" parameter referenced here is never used.  It's pretty pointless.
//  It would be an Event object, so calling it "images" is a misnomer.
window.onload = function(images){ 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 

    var sources = { 
        darthVader: "darth-vader.jpg", 
        yoda: "yoda.jpg" 
    }; 

    //  Don't confuse "images" here with the "images" parameter passed to 
    //  onload.  This is the callback's own private parameter.  It get's its
    //  value from the caller.
    loadImages(sources, function(images){ 
        context.drawImage(images.darthVader, 100, 30, 200, 137); 
        context.drawImage(images.yoda, 350, 55, 93, 104); 
    }); 
};

Редактировать: Примечание в квадратных скобках. Учитывая эту настройку: 

var obj = {};
var propertyName = "foo";

Следующие строки эквивалентны: 

obj.foo = 1;
obj["foo"] = 1;
obj[propertyName] = 1;

Каждая из приведенных выше строк добавит свойство с именем "foo" к obj.

1 голос
/ 03 февраля 2012

Погрузчик 

function loadImages(sources, callback){
    //images is set to an object literal
    //this is the same as writing "var images = new Object();
    var images = {};

    //the counter for the number of images loaded
    var loadedImages = 0;

    //the total number of images
    var numImages = 0;

    //count the total number of images to load
    for (var src in sources) {
        numImages++;
    }

    //iterate through every image in sources
    //"src" will be the key used in the object passed to the function (i.e. "yoda")
    for (var src in sources) {
        //set image[*keyname*] to a new Image object
        //i.e. images.yoda = new Image(), images.darthVader = new Image();
        images[src] = new Image();

        //attach an onload event listener to the image
        images[src].onload = function(){
            //add one to the number of images loaded
            //if the number of images loaded is equal to the total number of images, call the callback
            if (++loadedImages >= numImages) {
                //pass the object containing the images to load as a parameter of the callback function
                callback(images);
            }
        };
        //set the source of the created image to the src provided in the sources object
        //i.e. images.yoda.src = sources.yoda
        images[src].src = sources[src];
    }
}

Использование 

window.onload = function(images){
    //get the canvas
    var canvas = document.getElementById("myCanvas");

    //get the drawing context of the canvas
    var context = canvas.getContext("2d");

    //initialize a new object with two sources
    //accessible as sources.darthVader and sources.yoda
    var sources = {
        darthVader: "darth-vader.jpg",
        yoda: "yoda.jpg"
    };

    //load the images in sources using the provided callback function
    loadImages(sources, function(images){
        //draw the images that were loaded on the canvas
        context.drawImage(images.darthVader, 100, 30, 200, 137);
        context.drawImage(images.yoda, 350, 55, 93, 104);
    });
};
1 голос
/ 03 февраля 2012

На ваш первый вопрос: 

var images = {};

В javascript скобки означают, что он создает новый объект, поэтому это не NUL, а пустой объект. Объект в Javascript похож на массив, но он хранит пары ключ-значение вместо индексированных значений.

Чтобы понять, что происходит с обратным вызовом:

обратный вызов - это указатель на функцию, который передается вызывающей функции в функцию «loadImages».

source - это параметр функции, который также передается вызывающей стороной.

В следующей строке URL-адрес изображения считывается из этого массива: 

    images[src].src = sources[src];

создается новый массив (images [src])

Нет, но новый элемент создается внутри массива (элемент массива).

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

...