[jQuery] Re: Detecting wether an image link is going to work
On Feb 3, 6:15 pm, Karl Rudd karl.r...@gmail.com wrote:
You could try using the error handler:
$(image[1]).bind('error', function(){ /* ... */ });
I believe it works for all the common browsers.
Karl Rudd
Thanks Karl, that works fantastically! As you can see here now, it
just skips over the broken images:
http://sandbox.exit42design.com/photography/folio_1.html
[jQuery] Re: Detecting wether an image link is going to work
I'd try to avoid writing a routine explicitly for each image and instead use a loop. This is thoroughly untested. Thanks a ton Brian for the help with that code, I had no idea you could load an array like that! The loops were helpful as well, I used the each loop on the image object array to make Karl's error handler suggestion work very easily. The only problem though is putting the load function in a loop. Logically, it would seem to work, however in both methods you suggested, I got a parse error near the end of the loop. I took out the load function and the loop works fine. So I'm not sure if there's a workaround or not. Eventually, we're going to put a PHP backend on this site for managing the photos, I think we could just print each load event via a PHP loop if I can't make it work with jQuery. Nice pics. In FF3.0.5 (linux) when I click a thumbnail, the main image fades out (could be a tad faster), fades back in, then abruptly switches to the new image. I had a look at the gallery script but couldn't figure out where the problem lies. My gut tells me that could be optimised, too. But, one can't really say for sure without understanding everything that's being done and I really should stop procrastinating ;-) I need to clean up, organize and comment that gallery script a little bit more :-! But yeah, I've been struggling with that problem for months. It's only a problem in Firefox, and it only affects *certain* firefox users. There's no delay on my client's firefox, or on my mother's machine either. I can see it on my machine though, and it's still there in FF 3.1 :( I wish I could nail down what's causing the problem.
[jQuery] Re: Detecting wether an image link is going to work
On Wed, Feb 4, 2009 at 10:46 AM, daveJay davidjo...@exit42design.com wrote: I'd try to avoid writing a routine explicitly for each image and instead use a loop. This is thoroughly untested. Thanks a ton Brian for the help with that code, I had no idea you could load an array like that! The loops were helpful as well, I used the each loop on the image object array to make Karl's error handler suggestion work very easily. The only problem though is putting the load function in a loop. Logically, it would seem to work, however in both methods you suggested, I got a parse error near the end of the loop. I took out the load function and the loop works fine. So I'm not sure if there's a workaround or not. Eventually, we're going to put a PHP backend on this site for managing the photos, I think we could just print each load event via a PHP loop if I can't make it work with jQuery. Yeah, I thought it didn't look right. Even doing it with each() like that . It's too bad one can't create an Image oject with with both the dimensions and the src. Nice pics. In FF3.0.5 (linux) when I click a thumbnail, the main image fades out (could be a tad faster), fades back in, then abruptly switches to the new image. I had a look at the gallery script but couldn't figure out where the problem lies. My gut tells me that could be optimised, too. But, one can't really say for sure without understanding everything that's being done and I really should stop procrastinating ;-) I need to clean up, organize and comment that gallery script a little bit more :-! But yeah, I've been struggling with that problem for months. It's only a problem in Firefox, and it only affects *certain* firefox users. There's no delay on my client's firefox, or on my mother's machine either. I can see it on my machine though, and it's still there in FF 3.1 :( I wish I could nail down what's causing the problem. The code doesn't seem too bad. I really didn't spend too much time looking through it. As for the strange effect, I wonder if it has something to do with my cache.
[jQuery] Re: Detecting wether an image link is going to work
I don't see the gallery glitch, it probably has more to do with your CPU speed and RAM then your browser, as it is a large area to apply an opacity fade too. Is you mother's machine higher spec then yours? brian wrote: On Wed, Feb 4, 2009 at 10:46 AM, daveJay davidjo...@exit42design.com wrote: I'd try to avoid writing a routine explicitly for each image and instead use a loop. This is thoroughly untested. Thanks a ton Brian for the help with that code, I had no idea you could load an array like that! The loops were helpful as well, I used the each loop on the image object array to make Karl's error handler suggestion work very easily. The only problem though is putting the load function in a loop. Logically, it would seem to work, however in both methods you suggested, I got a parse error near the end of the loop. I took out the load function and the loop works fine. So I'm not sure if there's a workaround or not. Eventually, we're going to put a PHP backend on this site for managing the photos, I think we could just print each load event via a PHP loop if I can't make it work with jQuery. Yeah, I thought it didn't look right. Even doing it with each() like that . It's too bad one can't create an Image oject with with both the dimensions and the src. Nice pics. In FF3.0.5 (linux) when I click a thumbnail, the main image fades out (could be a tad faster), fades back in, then abruptly switches to the new image. I had a look at the gallery script but couldn't figure out where the problem lies. My gut tells me that could be optimised, too. But, one can't really say for sure without understanding everything that's being done and I really should stop procrastinating ;-) I need to clean up, organize and comment that gallery script a little bit more :-! But yeah, I've been struggling with that problem for months. It's only a problem in Firefox, and it only affects *certain* firefox users. There's no delay on my client's firefox, or on my mother's machine either. I can see it on my machine though, and it's still there in FF 3.1 :( I wish I could nail down what's causing the problem. The code doesn't seem too bad. I really didn't spend too much time looking through it. As for the strange effect, I wonder if it has something to do with my cache.
[jQuery] Re: Detecting wether an image link is going to work
On Feb 4, 11:20 am, brian bally.z...@gmail.com wrote: Yeah, I thought it didn't look right. Even doing it with each() like that . It's too bad one can't create an Image oject with with both the dimensions and the src. Well the other factor is that I want the images to load in succession as opposed to all at once. That way the first image pops in right away, and then people can view the others as they come in instead of waiting for all of them to load before doing anything. On Feb 4, 11:24 am, Liam Potter radioactiv...@gmail.com wrote: I don't see the gallery glitch, it probably has more to do with your CPU speed and RAM then your browser, as it is a large area to apply an opacity fade too. Is you mother's machine higher spec then yours? I don't think that's it because she has a macbook and I have a 15 Unibody Macbook Pro 2.4GHz Intel Core 2 Duo - 4GB 1067 MHz DDR3. And it has the NVIDIA GeForce 9600M GT with 256MB if VRAM. My mom's macbook has the Intel GMA 950 with 64MB VRAM So I'm really at a loss to explain it. I'm not sure how it could be a caching issue, and if it is, how to address it.
[jQuery] Re: Detecting wether an image link is going to work
You can set a timeout and jump to the next image if the image was not
loaded before the timeout.
see:
http://jsbin.com/evitu/edit
The third image is a broken link and will run into a 5s timeout.
by(e)
Stephan
2009/2/3 daveJay davidjo...@exit42design.com:
I've got a page set up where it loads each image on the page, one
after the other. As you can see here:
http://sandbox.exit42design.com/photography/folio_1.html
The problem with this is that if one of the images is broken, it'll
stop in it's tracks and not try to load the next.
Here's an example of how I'm loading the images
$(image[1]).load(function(){
$(#image1).attr({src : image[1].src});
image[2].src= path/to/next/image.jpg;
});
$(image[2]).load(function(){
$(#image2).attr({src : image[2].src});
image[3].src= path/to/next/image3.jpg;
});
So, basically when the first one is loaded, it inserts it onto the
page, and then sets up the next image path, and so on and so on. So I
need a way to detect if image 2 is going to load successfully, because
if it can't image 3 will never be allowed to load.
I tried using an ajax call but I'm not terribly familiar with how to
use it, for example, in an if statement. Can I get this ajax call to
just return a yes or no value of wether or not there was an error or
not?
$.ajax({url:imagesSrc[1], type:'HEAD', error:somefunction})
Thanks for any help. And any other comments/bug reports on the site
are welcome as well =)
[jQuery] Re: Detecting wether an image link is going to work
You could try using the error handler:
$(image[1]).bind('error', function(){ /* ... */ });
I believe it works for all the common browsers.
Karl Rudd
On Wed, Feb 4, 2009 at 5:41 AM, daveJay davidjo...@exit42design.com wrote:
I've got a page set up where it loads each image on the page, one
after the other. As you can see here:
http://sandbox.exit42design.com/photography/folio_1.html
The problem with this is that if one of the images is broken, it'll
stop in it's tracks and not try to load the next.
Here's an example of how I'm loading the images
$(image[1]).load(function(){
$(#image1).attr({src : image[1].src});
image[2].src= path/to/next/image.jpg;
});
$(image[2]).load(function(){
$(#image2).attr({src : image[2].src});
image[3].src= path/to/next/image3.jpg;
});
So, basically when the first one is loaded, it inserts it onto the
page, and then sets up the next image path, and so on and so on. So I
need a way to detect if image 2 is going to load successfully, because
if it can't image 3 will never be allowed to load.
I tried using an ajax call but I'm not terribly familiar with how to
use it, for example, in an if statement. Can I get this ajax call to
just return a yes or no value of wether or not there was an error or
not?
$.ajax({url:imagesSrc[1], type:'HEAD', error:somefunction})
Thanks for any help. And any other comments/bug reports on the site
are welcome as well =)
[jQuery] Re: Detecting wether an image link is going to work
On Tue, Feb 3, 2009 at 1:41 PM, daveJay davidjo...@exit42design.com wrote:
I've got a page set up where it loads each image on the page, one
after the other. As you can see here:
http://sandbox.exit42design.com/photography/folio_1.html
The problem with this is that if one of the images is broken, it'll
stop in it's tracks and not try to load the next.
Here's an example of how I'm loading the images
$(image[1]).load(function(){
$(#image1).attr({src : image[1].src});
image[2].src= path/to/next/image.jpg;
});
$(image[2]).load(function(){
$(#image2).attr({src : image[2].src});
image[3].src= path/to/next/image3.jpg;
});
So, basically when the first one is loaded, it inserts it onto the
page, and then sets up the next image path, and so on and so on. So I
need a way to detect if image 2 is going to load successfully, because
if it can't image 3 will never be allowed to load.
I'd try to avoid writing a routine explicitly for each image and
instead use a loop. This is thoroughly untested.
$(function()
{
var width = 1680;
var height = 946;
var imagesSrc =
[
images/16-9/mark.jpg,
images/16-9/Matoso_070526_2977_leila.jpg,
// etc.
];
/* create the Image objects
*/
var imagesObjects = new Array();
for (var i = 0; i imageSrc.length; i++)
{
imagesObjects[i] = new Image(width, height);
imagesObjects[i].src = imagesSrc[i];
/* this, or the block immediately below
*/
$(imagesObjects[i]).load(function()
{
$(#img_ + i).attr({src : $(this).attr('src')});
}
}
/* maybe this way is better
*/
$(imagesObjects).each(function(i)
{
$(this).load(function()
{
$(#img_ + i).attr({src : imagesObjects[i].src});
}
});
/* Put the first image into the Main Image Wrapper
*/
$(#image img).attr({src : imagesObjects[0].src});
});
Thanks for any help. And any other comments/bug reports on the site
are welcome as well =)
Nice pics. In FF3.0.5 (linux) when I click a thumbnail, the main image
fades out (could be a tad faster), fades back in, then abruptly
switches to the new image. I had a look at the gallery script but
couldn't figure out where the problem lies. My gut tells me that could
be optimised, too. But, one can't really say for sure without
understanding everything that's being done and I really should stop
procrastinating ;-)
