Hi, I am still very new to Ruby on Rails, but I''m busy with my first
RoR website, everything went well, until I realized that my images
didn''t preload... On previous websites I used a simple JavaScript
preloader that seemed to work very well:
function preloadImages() {
if (document.images) {
var imgFiles = preloadImages.arguments;
var preloadArray = new Array();
for (var i=0; i < imgFiles.length; i++) {
preloadArray[i] = new Image;
preloadArray[i].src = imgFiles[i];
}
}
}
And I called it from within the HTML:
<body
onload="preloadImages(''/images/home.png'',....etc....)
This is how I called the image rollover in the Rails code:
<%= link_to(image_tag(''home.png'',
:mouseover=>"home_ro.png"), ''/'',
{:controller=>''home'',
:action=>''index''}) %>
Can anyone please tell me why this didn''t work? I also heard that
Prototype has it''s own built-in image preloader, is this true?
Thanks I really appreciate your help!
--
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-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
On Apr 10, 2010, at 9:32 AM, ChaosKnight wrote:> > Hi, I am still very new to Ruby on Rails, but I''m busy with my first > RoR website, everything went well, until I realized that my images > didn''t preload... On previous websites I used a simple JavaScript > preloader that seemed to work very well: > > function preloadImages() { > if (document.images) { > var imgFiles = preloadImages.arguments; > var preloadArray = new Array(); > for (var i=0; i < imgFiles.length; i++) { > preloadArray[i] = new Image; > preloadArray[i].src = imgFiles[i]; > } > } > } > > And I called it from within the HTML: > > <body onload="preloadImages(''/images/home.png'',....etc....) > > This is how I called the image rollover in the Rails code: > <%= link_to(image_tag(''home.png'', :mouseover=>"home_ro.png"), ''/'', > {:controller=>''home'', :action=>''index''}) %> > > Can anyone please tell me why this didn''t work? I also heard that > Prototype has it''s own built-in image preloader, is this true? > > Thanks I really appreciate your help!You''ll want to take the onload out of the body tag and do something like this in your application.js file: document.observe("dom:loaded", function() { preloadImages(''/images/home.png'',....etc....); } ); -- 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-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
On Apr 11, 3:43 am, steve ross <cwdi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On Apr 10, 2010, at 9:32 AM, ChaosKnight wrote: > > > > > > > > > Hi, I am still very new to Ruby on Rails, but I''m busy with my first > > RoR website, everything went well, until I realized that my images > > didn''t preload... On previous websites I used a simple JavaScript > > preloader that seemed to work very well: > > > function preloadImages() { > > if (document.images) { > > var imgFiles = preloadImages.arguments; > > var preloadArray = new Array(); > > for (var i=0; i < imgFiles.length; i++) { > > preloadArray[i] = new Image; > > preloadArray[i].src = imgFiles[i]; > > } > > } > > } > > > And I called it from within the HTML: > > > <body onload="preloadImages(''/images/home.png'',....etc....) > > > This is how I called the image rollover in the Rails code: > > <%= link_to(image_tag(''home.png'', :mouseover=>"home_ro.png"), ''/'', > > {:controller=>''home'', :action=>''index''}) %> > > > Can anyone please tell me why this didn''t work? I also heard that > > Prototype has it''s own built-in image preloader, is this true? > > > Thanks I really appreciate your help! > > You''ll want to take the onload out of the body tag and do something like this in your application.js file: > > document.observe("dom:loaded", function() > { > preloadImages(''/images/home.png'',....etc....);} > > );That still doesn''t work in Firefox... What about caching? Won''t that help? Or perhaps and alternative solution that works better? -- 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.
On Apr 11, 2010, at 4:15 AM, ChaosKnight wrote:> > On Apr 11, 3:43 am, steve ross <cwdi...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote: >> On Apr 10, 2010, at 9:32 AM, ChaosKnight wrote: >> >>> Hi, I am still very new to Ruby on Rails, but I''m busy with my first >>> RoR website, everything went well, until I realized that my images >>> didn''t preload... On previous websites I used a simple JavaScript >>> preloader that seemed to work very well: >> >>> function preloadImages() { >>> if (document.images) { >>> var imgFiles = preloadImages.arguments; >>> var preloadArray = new Array(); >>> for (var i=0; i < imgFiles.length; i++) { >>> preloadArray[i] = new Image; >>> preloadArray[i].src = imgFiles[i]; >>> } >>> } >>> } >> >>> And I called it from within the HTML: >> >>> <body onload="preloadImages(''/images/home.png'',....etc....) >> >>> This is how I called the image rollover in the Rails code: >>> <%= link_to(image_tag(''home.png'', :mouseover=>"home_ro.png"), ''/'', >>> {:controller=>''home'', :action=>''index''}) %> >> >>> Can anyone please tell me why this didn''t work? I also heard that >>> Prototype has it''s own built-in image preloader, is this true? >> >>> Thanks I really appreciate your help! >> >> You''ll want to take the onload out of the body tag and do something like this in your application.js file: >> >> document.observe("dom:loaded", function() >> { >> preloadImages(''/images/home.png'',....etc....);} >> >> ); > > That still doesn''t work in Firefox... What about caching? Won''t that > help? > Or perhaps and alternative solution that works better?You haven''t really said what "doesn''t work" means. What have you done to determine that there is a problem? -- 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-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en.
I''m just a rails amateur, but I''ve been dealing with Prototype
stuff a bit
longer and I bumped into this image preloading stuff already.
I don''t clearing understand what you want to do while your images are
preloading and also what you want to do once they are preloaded and this is
pretty crucial as this may last some time. You''ll never know.
And in addition your code is too simplistic.
So take a look at this that I posted to the ProtoScripty group a while ago:
====================================================
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/<http://www.google.com/url?sa=D&q=http://www.webreference.com/programming/javascript/gr/column3/&usg=AFQjCNFzGhxZUss7TN6EJ8L7Yt4qIqydAA>
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
2010/4/10 ChaosKnight <rvanhoepen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
> Hi, I am still very new to Ruby on Rails, but I''m busy with my
first
> RoR website, everything went well, until I realized that my images
> didn''t preload... On previous websites I used a simple JavaScript
> preloader that seemed to work very well:
>
> function preloadImages() {
> if (document.images) {
> var imgFiles = preloadImages.arguments;
> var preloadArray = new Array();
> for (var i=0; i < imgFiles.length; i++) {
> preloadArray[i] = new Image;
> preloadArray[i].src = imgFiles[i];
> }
> }
> }
>
> And I called it from within the HTML:
>
> <body
onload="preloadImages(''/images/home.png'',....etc....)
>
> This is how I called the image rollover in the Rails code:
> <%= link_to(image_tag(''home.png'',
:mouseover=>"home_ro.png"), ''/'',
> {:controller=>''home'',
:action=>''index''}) %>
>
> Can anyone please tell me why this didn''t work? I also heard that
> Prototype has it''s own built-in image preloader, is this true?
>
> Thanks I really appreciate your help!
>
> --
> 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-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org<rubyonrails-talk%2Bunsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org>
> .
> 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-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en.
It all depends, as you say, on why you''re preloading the images. Most of the image preloading code looks exactly like the OP''s and works fine if your UI relies on just having the images cached by the browser so they can work in smooth rollovers or other page effects that rely on image swapping. Your code is more capable, but possibly overkill if all that''s being handled is making sure mouseovers look good. Note also that the preloading code has been blindly included in Web pages for years, even as bandwidth has increased to render the benefits insignificant. Just my $.02 On Apr 11, 2010, at 10:42 AM, Christophe Decaux wrote:> I''m just a rails amateur, but I''ve been dealing with Prototype stuff a bit longer and I bumped into this image preloading stuff already. > I don''t clearing understand what you want to do while your images are preloading and also what you want to do once they are preloaded and this is pretty crucial as this may last some time. You''ll never know. > And in addition your code is too simplistic. > > So take a look at this that I posted to the ProtoScripty group a while ago: > ====================================================> 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 > > > > 2010/4/10 ChaosKnight <rvanhoepen-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> > Hi, I am still very new to Ruby on Rails, but I''m busy with my first > RoR website, everything went well, until I realized that my images > didn''t preload... On previous websites I used a simple JavaScript > preloader that seemed to work very well: > > function preloadImages() { > if (document.images) { > var imgFiles = preloadImages.arguments; > var preloadArray = new Array(); > for (var i=0; i < imgFiles.length; i++) { > preloadArray[i] = new Image; > preloadArray[i].src = imgFiles[i]; > } > } > } > > And I called it from within the HTML: > > <body onload="preloadImages(''/images/home.png'',....etc....) > > This is how I called the image rollover in the Rails code: > <%= link_to(image_tag(''home.png'', :mouseover=>"home_ro.png"), ''/'', > {:controller=>''home'', :action=>''index''}) %> > > Can anyone please tell me why this didn''t work? I also heard that > Prototype has it''s own built-in image preloader, is this true? > > Thanks I really appreciate your help! > > -- > 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.-- 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.