Dom:loaded problems

Hi everybody:
I was trying use dom:loaded, but I read in the Api of prototype that
this function load all HTML code except the images. My problem is that
all my web is an image and I want that it were full loaded before the
webpage shows it, because that I want that it seems like a video and if
it isn´t fully loaded it doesn´t seem a video. Anyone can help me?? I
tried using the following:

<%=image_tag("/guarrada/Debug/foto.jpg") %>

THANKS!!!

What you are facing is the classic image loading issue.

I think the following code should help you, I found it sometime ago it
is based on this page :

Basically, you need to have

  • an array with url’s for your big images such as picSrc[0] =
    ‘images/big1.jpg’; picSrc[1] = ‘images/big3.jpg’
  • a hidden
    in your page which displays your
    waiting message

When you want to load your big images you call these two lines:

$(‘waitingPic’).show()
initPics()

Here’s the code

function initPics(){
var ImagePreLoader = Class.create({
callback: null,
imageCache: new Array,
loaded: 0,
processed: 0,
noOfImages: 0,
initialize: function(images, options) {
if (options) {
if (options.callback) this.callback = options.callback;
}

  this.noOfImages = images.length;
  for ( var i = 0; i < images.length; i++ )
      this.preload(images[i]);
},
preload: function(imgSrc) {
  var image = new Image;
  this.imageCache.push(image);
  Event.observe(image, 'load', 

this.onload.bindAsEventListener(this), false);
Event.observe(image, ‘error’,
this.onerror.bindAsEventListener(this), false);
Event.observe(image, ‘abort’,
this.onabort.bindAsEventListener(this), false);
image.preloader = this;
image.loaded = false;
image.src = imgSrc;
},
onComplete: function() {
this.processed++;
if (this.processed==this.noOfImages) {
this.callback(this.imageCache, this.loaded);
}
},
onload: function(e) {
this.loaded++;
this.onComplete();
},
onerror: function(e) {
this.onComplete();
},
onabort: function(e) {
this.onComplete();
}
});

var imgPreloadCallback = function(imageCache, loaded) {
// where:
// imageCache is an array of the loaded images
// loaded is an int of the number of images that loaded.
//doSomethingAfterImagesAreLoaded();
$(‘waitingPic’).hide();
picsPreLoaded = true;
}

var imgLoader = new
ImagePreLoader(picSrc,{callback:imgPreloadCallback});
}

Hope this helps.

Christophe
Le 11 mars 2010 à 16:40, Guille S. a écrit :

Guille S. wrote:

Hi everybody:
I was trying use dom:loaded, but I read in the Api of prototype that
this function load all HTML code except the images. My problem is that
all my web is an image and I want that it were full loaded before the
webpage shows it, because that I want that it seems like a video and if
it isn´t fully loaded it doesn´t seem a video. Anyone can help me?? I
tried using the following:

Event.observe(window, ‘load’, function() {
$$(‘imagen’).invoke(‘hide’);
})

The event “dom:loaded” is added by Prototype specifically so you don’t
have to wait for the entire page to fully load. The event get fired just
after the DOM is fully loaded, but before any other page assets are
loaded. This is usually what you want, but not always. If you really
want to wait for the entire page to load then use the window “load”
event which is what you are showing above.

Also see How to hide an object? - Rails - Ruby-Forum where I explained a
few other problems I saw with your script.

I want to also make clear that you must include the Prototype JavaScript
files in order to use any of the Prototype features. Maybe you’re doing
that and not showing it here, but just want to make sure you understand
that.

Robert W. wrote:

Guille S. wrote:

Hi everybody:
I was trying use dom:loaded, but I read in the Api of prototype that
this function load all HTML code except the images. My problem is that
all my web is an image and I want that it were full loaded before the
webpage shows it, because that I want that it seems like a video and if
it isn´t fully loaded it doesn´t seem a video. Anyone can help me?? I
tried using the following:

Event.observe(window, ‘load’, function() {
$$(‘imagen’).invoke(‘hide’);
})

The event “dom:loaded” is added by Prototype specifically so you don’t
have to wait for the entire page to fully load. The event get fired just
after the DOM is fully loaded, but before any other page assets are
loaded. This is usually what you want, but not always. If you really
want to wait for the entire page to load then use the window “load”
event which is what you are showing above.

Also see How to hide an object? - Rails - Ruby-Forum where I explained a
few other problems I saw with your script.

I´m looking that, if I have problems I said to you

I want to also make clear that you must include the Prototype JavaScript
files in order to use any of the Prototype features. Maybe you’re doing
that and not showing it here, but just want to make sure you understand
that.
I included it time ago, but thanks for the conseil because sometimes I
forgot that

THANKS