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
Le 11 mars 2010 à 16:40, Guille San a écrit :
> 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/.
>
> --
> 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 [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/rubyonrails-talk?hl=en.
>
--
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 [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
