dom:loaded problems

[Guille San]

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:
<script type="text/javascript">
function lastSpy() {

var target = $('imagen');

if (!target) return false;
new Ajax.PeriodicalUpdater(target,
'http://localhost:3000/',{frequency:'0.25'})
}

Event.observe(window, 'load', lastSpy, false);

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

</script>
<div id="imagen" >
<%=image_tag("/guarrada/Debug/foto.jpg") %>
</div>

THANKS!!!!!!!!
--
Posted via http://www.ruby-forum.com/.

[Christophe Decaux]

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 : http://www.webreference.com/programming/javascript/gr/column3/

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 <div id="waitingPic"> 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

--
You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
To post to this group, send email to rubyonra...@googlegroups.com.
To unsubscribe from this group, send email to rubyonrails-ta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.

[Robert Walker]

Guille San 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:
> <script type="text/javascript">

> 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 http://www.ruby-forum.com/topic/205708#new 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.

[Guille San]

Robert Walker wrote:
> Guille San 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:
>> <script type="text/javascript">
>
>> 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 http://www.ruby-forum.com/topic/205708#new 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