Question

slider  = options.images[n];
//slider is an object with: title, src etc. properties but without "width" and "height" properties.
// so that i want to change/add those two proerties in preload function
if( slider.width == undefined || slider.width == 0 ){
    console.log('init for'+n);
    tSlider.preload(slider.src, function(){
        //this.width and this.height are real values
        slider.width = this.width;
        slider.height=this.height;
    });

    //why can not read the width and height?
    slider.width == undefined;// true
}

Answer 1

If your preload function is asynchronous, and it only executes that callback once it’s loaded the image then your slider.width call in the outer function will always be undefined. You need to wait for the callback to execute, and only then check the property.

That’s the way asynchronous execution works in javasript. But your property check is in the synchronous section – i.e. it’s not waiting for the image to load, it’s just checking straight away.

Just answered a similar question and provided an example: See How to send a return form a callback function to the main function