This is even more strange:
http://reghellin.com/debug/image-preloader/
here the relevant code:
prepare:function(){
this.images = this.image_box.getElements('img');
this.images.each(function(image,index){
this.data.push({image:image, src:image.get('src')});
image.set({
'src':'',
'styles':{
//'opacity':0,
//'visibility':'hidden'
}
});
},this);
},
load_image:function(){
var img = new Asset.image(this.data[this.image_index].src, {
onLoad:function(img_tag){
$(document.body).innerHTML +=
img_tag.get('src')+'<br>'
var data = this.data[this.image_index];
data.image.set('src',data.src);
console.log(data.image);
this.image_index += 1;
if(this.image_index < this.data.length){
this.load_image();
}
}.bind(this)//fine onLoad
});//fine asset
},
in prepare() I fill the data array with the images and strip out the
src prop to stop the browser natural loading process. ok.
in load_image, onLoad, I set the src prop again. It does, but.. Not in
on the window.images.. It seems as I filled the array with a copy of
the images instead of the images themselves. More, If i, from onLoad,
try to reference the images direcly, like:
$('image-box').getElements('img')[0].setStyle('border','1px solid
#ff0000')
it won't work!!! Uh???
Any idea? :(
