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 rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
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 rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org > To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. > 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 rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
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. -- 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 rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
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 -- 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 rubyonrails-talk-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk+unsubscribe@googlegroups.com. For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.