Below is the source code for a function that preloads images onto a page, the author has added in some comments to explain how the code works, but I still do not fully understand all of it. to be specific, He claims that the return value of this function is an empty object with a "done()" method that calls the predefined anonymous function, "postaction()". Is the user of this code supposed to enter his/her own code into the empty postaction function on line 2? If that's how it works, then what does "postaction=f || postaction" in the return object do?
Source code:
function preloadimages(arr){
var newimages=[], loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost(){
loadedimages++
if (loadedimages==arr.length){
postaction(newimages) //call postaction and pass in newimages array as parameter
}
}
for (var i=0; i<arr.length; i++){
newimages[i]=new Image()
newimages[i].src=arr[i]
newimages[i].onload=function(){
imageloadpost()
}
newimages[i].onerror=function(){
imageloadpost()
}
}
return { //return blank object with done() method
done:function(f){
postaction=f || postaction
//remember user defined callback functions to be called when images load
}
}
}
link to author's page:http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
You can enter your own function for postaction, although it's not a callback function like you might expect.
However, it returns an object with a done function in it.
If you do soth. like
preloadimages().done(function () {
console.log('done')
});
your function will be executed. If you don't provide the fnction as a parameter of done, the default postaction will be called and do nothing, since it is an empty function
From reading that code, it looks like you're not meant to redefine postaction()
- in fact, you shouldn't have to modify any of this code at all. You are actually expected to pass a function as an argument to the done()
function, which will be called later on successful image load (a 'callback' function).
This line:
postaction=f || postaction
means "assign the value of f to postaction if f has a value, otherwise assign postaction to itself" (ie. don't change it).
I don't know what exactly this code is used for, but the returned object has a function done which can be used with or without function parameter.
Within done, this statement
f || postaction
Meaning f OR postaction returns f if f is not null/undefined or postaction else, so if you call
myreturnObject.done();
this evaluates to
postaction = postaction
because f is not define. If you call
myreturnObject.done(function(newImages) { ... });
this evaluates to
postaction = f.
Postaction is then used within the for loop in the imageLoadPost function. If you want some own coding there, you can pass it to the done method as parameter as shown. If you do not need any additional coding there, do not pass an function to postaction. The empty postaction function defined as fallback will be called then.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.