Javascript 有人能解释一下这个涉及回调的图像加载器函数吗 守则: 混乱
3:向该函数传递两个参数,其中一个参数本身就是一个函数:callbackJavascript 有人能解释一下这个涉及回调的图像加载器函数吗 守则: 混乱,javascript,image-loading,Javascript,Image Loading,3:向该函数传递两个参数,其中一个参数本身就是一个函数:callback var images = {}; 4:最后,图像设置为。。。努尔(?) 5:我的大脑在这一点上是混乱的 } }; images[src].src = sources[src]; } } window.onload = function(images){ 据我所知 1:参数“images”为空 var canvas = document.
var images = {};
4:最后,图像设置为。。。努尔(?)
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);
});
};
资料来源:
编辑:问题::
从第4步:到第5步:(特别是在第二个for循环中),将创建一个新数组(images[src]),并将其传递给callback()函数,该函数在第2步之前定义为inline:。它实际上从何处获取源代码中的图像?关于第一个问题:
var images = {};
大括号表示在javascript中它创建了一个新对象,因此它不是NUL而是一个空对象。Javascript中的对象类似于数组,但它存储的是键值对而不是索引值
要了解回调发生了什么,请执行以下操作: callback是一个函数指针,调用者将其传递给函数“loadImages”
source是调用方传递给函数的参数 在下一行中,从该数组读取图像URL:
images[src].src = sources[src];
正在创建一个新数组(images[src]) 否,但在数组(数组元素)中创建了一个新项
这个加载器函数的缺点是,它只在回调中告诉您一个映像已经完成,而不告诉您是哪个映像完成了 我已将注释添加到您的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];
}
}
编辑:关于方括号符号的注释。鉴于此设置:
var obj = {};
var propertyName = "foo";
以下几行是等效的:
obj.foo = 1;
obj["foo"] = 1;
obj[propertyName] = 1;
上面的每一行都将向加载程序添加一个名为“foo”的属性
用法
请不要无缘无故地咒骂:“我的脑子里满是f***在这一点上……”我不明白它是怎么工作的。。。你能解释一下或者给我指一个我能理解这些函数的地方吗swearing@Felix我已经添加了特定的问题…
{}
是一个对象
文本,[]
是一个数组
文本。不要混淆两者。
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;
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);
});
};