Re: [jQuery] image preloading
Luke, this is a great technique - thanks!
As far as my original question, I am still curious to find out the
following:
With the following preload function:
$.preloadImages = function()
{
for(var i = 0; iarguments.length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
does the browser completely download each image before the script changes
the source and begins the next download or is/can the image download be
interrupted by the variable being reassigned?
Anyone?
Luke Lutman wrote:
Here's what I use:
$(window).bind('load', function(){
var preload = [
'/images/assets/file/1.gif',
'/images/assets/file/2.gif',
'/images/assets/file/3.gif'
];
$(document.createElement('img')).bind('load', function(){
if(preload[0]) this.src = preload.shift();
}).trigger('load');
});
This loads the images sequentially, so you don't have to worry
interrupting one image with
another. It's much nicer to your server too, because there won't be a
barrage of image requests
all at once.
I'd also suggest waiting to start preloading until the page has finished
loading. Right now,
you're preloading at the same time the page is loading, which will make
the page feel slow
(especially if you're preloading a lot of images).
Cheers,
Luke
PragueExpat wrote:
Using the method below to preload images, I have a simple question:
The same variable (in this case 'img') is being used for all preloaded
images.
Img.src is used to tell the browser to make a call to the server to fetch
the image
What if the connection to the server is slow (or the image is large) -
does
the script wait until the image is loaded before continuing or is there a
chance that the variable will be overwritten (because of the loop) and
its
source set to the next image before the first image is fully downloaded?
I use this script and it works fine, but I would like to find out if a
potentially slow client might have different results.
Thanks.
Sam Collett wrote:
Perhaps you could use something like this:
$.preloadImages = function()
{
for(var i = 0; iarguments.length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
Then you call it as soon as possible (it doesn't have to be in
$(document).ready):
$.preloadImages(foo.gif, bar.gif);
$(document).ready(function() { ... });
On 28/09/06, Aljosa Mohorovic [EMAIL PROTECTED] wrote:
is there a preferred way to preload images when site uses jquery? how
do you usually preload images?
Aljosa Mohorovic
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
zinc Roe Design
www.zincroe.com
(647) 477-6016
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/image-preloading-tf2351203.html#a8825812
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] image preloading
Thanks for testing this.
I guess that means that although the variable gets overwritten, the image
object remains in memory and the browser's http connection (that is pulling
down the current image) remains active until the image is loaded. So
basically the image object stays alive, but there is no way to access it
from javascript. Sound about right?
Luke Lutman wrote:
Ok, did a quick test in FF and Safari :-)
- The function doesn't wait, it makes all the requests at once (more or
less).
- The variable gets overwritten.
- It doesn't interrupt the download.
One thing I did find was that if I do:
var img = new Image();
img.onload = function(){
var that = this;
}
img.src = arguments[i];
Then the variable 'that' will point to window, not img.
However, if I do:
var img = document.createElement('img');
img.onload = function(){
var that = this;
}
img.src = arguments[i];
Then the variable 'that' will point to img, and the event handler will
work as expected.
Luke
PragueExpat wrote:
Luke, this is a great technique - thanks!
As far as my original question, I am still curious to find out the
following:
With the following preload function:
$.preloadImages = function()
{
for(var i = 0; iarguments.length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
does the browser completely download each image before the script changes
the source and begins the next download or is/can the image download be
interrupted by the variable being reassigned?
Anyone?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/image-preloading-tf2351203.html#a8829521
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] image preloading
That's exactly what I was trying to find out. Thanks for your input.
So I take it the best method is to have a new Image object for each image to
be preloaded (and making sure that any variables are not overwritten). Looks
like the method Luke suggested in this thread is a good one to use.
Nathan Young -X (natyoung - Artizen at Cisco) wrote:
Hi.
The http request will NOT always succeed under the conditions you
describe in IE and I think sometimes in firefox (possible race
condition?).
If you are preloading images for user experience reasons the stakes are
low, but if you need to track the requests from the server side (for
example for exit link tracking) discarding or re-using the img object
too quickly can cause requests to be dropped.
---Nathan
.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:||:._.:
||:.
Nathan Young
Cisco.com-Interface Development
A: ncy1717
E: [EMAIL PROTECTED]
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of PragueExpat
Sent: Tuesday, February 06, 2007 8:50 AM
To: discuss@jquery.com
Subject: Re: [jQuery] image preloading
Thanks for testing this.
I guess that means that although the variable gets
overwritten, the image
object remains in memory and the browser's http connection
(that is pulling
down the current image) remains active until the image is loaded. So
basically the image object stays alive, but there is no way
to access it
from javascript. Sound about right?
Luke Lutman wrote:
Ok, did a quick test in FF and Safari :-)
- The function doesn't wait, it makes all the requests at
once (more or
less).
- The variable gets overwritten.
- It doesn't interrupt the download.
One thing I did find was that if I do:
var img = new Image();
img.onload = function(){
var that = this;
}
img.src = arguments[i];
Then the variable 'that' will point to window, not img.
However, if I do:
var img = document.createElement('img');
img.onload = function(){
var that = this;
}
img.src = arguments[i];
Then the variable 'that' will point to img, and the event
handler will
work as expected.
Luke
PragueExpat wrote:
Luke, this is a great technique - thanks!
As far as my original question, I am still curious to find out the
following:
With the following preload function:
$.preloadImages = function()
{
for(var i = 0; iarguments.length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
does the browser completely download each image before the
script changes
the source and begins the next download or is/can the
image download be
interrupted by the variable being reassigned?
Anyone?
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/image-preloading-tf2351203.html#a8829521
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/image-preloading-tf2351203.html#a8831469
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] image preloading
Using the method below to preload images, I have a simple question:
The same variable (in this case 'img') is being used for all preloaded
images.
Img.src is used to tell the browser to make a call to the server to fetch
the image
What if the connection to the server is slow (or the image is large) - does
the script wait until the image is loaded before continuing or is there a
chance that the variable will be overwritten (because of the loop) and its
source set to the next image before the first image is fully downloaded?
I use this script and it works fine, but I would like to find out if a
potentially slow client might have different results.
Thanks.
Sam Collett wrote:
Perhaps you could use something like this:
$.preloadImages = function()
{
for(var i = 0; iarguments.length; i++)
{
img = new Image();
img.src = arguments[i];
}
}
Then you call it as soon as possible (it doesn't have to be in
$(document).ready):
$.preloadImages(foo.gif, bar.gif);
$(document).ready(function() { ... });
On 28/09/06, Aljosa Mohorovic [EMAIL PROTECTED] wrote:
is there a preferred way to preload images when site uses jquery? how
do you usually preload images?
Aljosa Mohorovic
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/image-preloading-tf2351203.html#a8805460
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Scrolling in Opera?
that link in the original post should have been ...has a lot of lt;a
href=#xxxgt; and lt;a name=xxxgt; anchors...
Guess I should preview first :)
PragueExpat wrote:
Has anyone else had the problem of Opera not scrolling when using the
ScrollTo in interface?
(By the way, Stefan and Paul, thanks for your work on interface - I use it
a lot)
My page has a lot of #xxx and anchors and I wanted to use the
ScrollToAnchors method in interface. Since the method looks for elements
to scroll to (not named anchors), I made this (small) change to the
method:
ScrollToAnchors : function(speed, axis, easing) {
return this.each(
function()
{
jQuery(this).click(
function(e)
{
parts =
this.href.split('#');
jQuery('[EMAIL
PROTECTED]'+parts[1]+']').ScrollTo(800);
return false;
}
);
}
)
}
and used this in the document ready:
$('[EMAIL PROTECTED]#]').ScrollToAnchors(800);
Works great in FF, IE but not in Opera. I tried a straight ScrollTo
function in Opera, which also failed.
Can anyone confirm?
--
View this message in context:
http://www.nabble.com/Scrolling-in-Opera--tf3138253.html#a8697598
Sent from the jQuery Plugins mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] Scrolling in Opera?
Has anyone else had the problem of Opera not scrolling when using the
ScrollTo in interface?
(By the way, Stefan and Paul, thanks for your work on interface - I use it a
lot)
My page has a lot of #xxx and anchors and I wanted to use the
ScrollToAnchors method in interface. Since the method looks for elements to
scroll to (not named anchors), I made this (small) change to the method:
ScrollToAnchors : function(speed, axis, easing) {
return this.each(
function()
{
jQuery(this).click(
function(e)
{
parts =
this.href.split('#');
jQuery('[EMAIL
PROTECTED]'+parts[1]+']').ScrollTo(800);
return false;
}
);
}
)
}
and used this in the document ready:
$('[EMAIL PROTECTED]#]').ScrollToAnchors(800);
Works great in FF, IE but not in Opera. I tried a straight ScrollTo function
in Opera, which also failed.
Can anyone confirm?
--
View this message in context:
http://www.nabble.com/Scrolling-in-Opera--tf3138253.html#a8697485
Sent from the jQuery Plugins mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
I second the request for a good understanding of what the JQuery object is.
Daniel McBrearty wrote:
ok, I got it. To access the element I need to access $('#id')[0]
What confused me here is that I wasn't really clear what the jquery
object actually is. I have looked through the various intro and
tutorial material a few times, and managed to get the library to do
some useful things, but I missed this.
Is there anywhere where this is explained?
thanks
Daniel
On 1/15/07, Daniel McBrearty [EMAIL PROTECTED] wrote:
sorry ... not the smartest question. of course, one returns the
element, one returns the jquery object.
What I needed was $('#id').attr( { autocomplete : off } );
I still have a problem to set the focus though. There is no error shown
for
$('#id').focus();
but the focus is not set ...
On 1/15/07, Daniel McBrearty [EMAIL PROTECTED] wrote:
I'm changing some old js I had to use jQuery.
I used to have a function like this (to select a certain text input on
a form and automatically focus on it) ... :
window.onload = function() {
self.focus();
document.getElementById(userresponse).setAttribute(autocomplete,off);
document.getElementById(userresponse).focus();
}
which worked fine ... then I replace it with this:
$(function () {
self.focus();
$(#userresponse).setAttribute(autocomplete,off);
$(#userresponse).focus();
});
which fails to select the text box. why not? I thought these were
equivalent excpet the jQuery version loads sooner?
thanks
Daniel
--
Daniel McBrearty
email : danielmcbrearty at gmail.com
www.engoi.com : the multi - language vocab trainer
BTW : 0873928131
--
Daniel McBrearty
email : danielmcbrearty at gmail.com
www.engoi.com : the multi - language vocab trainer
BTW : 0873928131
--
Daniel McBrearty
email : danielmcbrearty at gmail.com
www.engoi.com : the multi - language vocab trainer
BTW : 0873928131
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/what%27s-the-difference-between-document.getElementById%28%27id%27%29-and-%24%28%27-id%27%29---tf3017662.html#a8389635
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] what's the difference between document.getElementById('id') and $('#id') ?
Thanks for the explaination. The reason for my request was my curiosity of
what exactly makes up the JQuery Object. For example, I didn't understand
that [0] is a reference to the first DOM object.
I ran this to try to look at the Object (using 1.04):
---
html
head
script type=text/javascript src=jquery.js/script
/head
body
form
input id=test class=test type=text nametest
input id=test2 class=test type=text nametest
/form
script type=text/javascript
!--
$(document).ready(function(){
var t = $(.test);
var s;
for (property in t)
{
s = s + brbrhr /brbr +property.toString()+ :
+t[property].toString();
}
document.write(s.toString());
});
//--
/script
/body
/html
---
and learned quite a bit. (Although the page never fully loads, not sure
why). Anyway, I would recommend looking at this page for anyone who wants to
learn more.
(If there is a better way to look at the Object, please post here)
- Rich
malsup wrote:
I second the request for a good understanding of what the JQuery object
is.
The jQuery object is just a JavaScript object (like Date or Array).
It encapsulates zero or more DOM elements and lets you manipulate
those elements using the jQuery API.
var jq = $('.myClass');
The statement above selects all elements that have a class of
'myClass' and wraps them in an object - the jQuery object. Once those
elements are wrapped in a jQuery object you can use the jQuery API to
do all kinds of things with them. Like show them all:
jq.show();
or add a click event handler to all of them:
jq.click(function() { alert ('I was clicked'); });
or access each of the selected DOM elements:
jq.each(function(i) {
// 'this' is the DOM element inside the 'each' method
this.innerHTML = 'my index is ' + i;
});
That's really the nuts and bolts of it. jQuery lets you easily select
elements in the DOM and do something with them. It's selection
capabilities are very powerful and very fast. And it's API is quite
extensive.
You'll also find that most of the functions in the jQuery API return
the jQuery object on which they operate. This means they are
chainable and this is great when you want to do more than one thing
with the selected elements. The examples above could be combined into
a single statement like this:
$('.myClass').show().click(function() {
alert ('I was clicked');
}).each(function(i) {
this.innerHTML = 'my index is ' + i;
});
Mike
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
--
View this message in context:
http://www.nabble.com/what%27s-the-difference-between-document.getElementById%28%27id%27%29-and-%24%28%27-id%27%29---tf3017662.html#a8391034
Sent from the JQuery mailing list archive at Nabble.com.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
[jQuery] dimensions.js breaks height function?
Please advise: I need to use dimensions.js for the offset function. However, since this file overwrites JQuery's height function, I can no longer set heights (-- i.e. $(p).height(20px); --). Will the offset function work on all browsers if I strip out dimensions' height function? Does anyone know the plan for dimensions.js? Will the 2 height functions somehow be merged? Thanks for any help... -- View this message in context: http://www.nabble.com/dimensions.js-breaks-height-function--tf2618104.html#a7306339 Sent from the JQuery mailing list archive at Nabble.com. ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
