views:

215

answers:

2

Hello,

I am using a JQuery Plugin called lightbox (which is great btw). Problem is, I am accessing images on external sites and I think they are blocking lightbox from preloading them.

Specifically I have confirmed that picasa gives the preloader a 404 (using firebug), but if I right click the failed request in the firebug "net" tab, and "Open in new tab" The image loads fine.

This happens with any images from picasa, unless I've already viewed them (in which case I believe they are pulled from the brower's cache rather than loading them again)

There are a a few differences between the headers sent by the browser vs the preloader (also from firebug):

the preloader's "Accept" header is:

image/png,image/*;q=0.8,*/*;q=0.5

vs loading the image directly in the browser:

text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

I suspect this is one way a remote server could differentiate a browser request from the javascript. What do you think?

Also, here is the preloader code from the plugin... just in case

// Image preload process
var objImagePreloader = new Image();
objImagePreloader.onload = function() {
    $('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
    // Perfomance an effect in the image container resizing it
    _resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
    // clear onLoad, IE behaves irratically with animated gifs otherwise
    objImagePreloader.onload=function(){};
};
objImagePreloader.src = settings.imageArray[settings.activeImage][0];

update

apparently picasa is blocking me from displaying the full-size images at all whether part of the DOM or preloaded via javascript... not sure what to do about this

+1  A: 

You could always add the preload IMG tags to the DOM in a hidden DIV instead of loading them with JavaScript. That way the browser is loading them "naturally".

Diodeus
what is the downside to doing that? is there one?
Jiaaro
It will happen after the DOM loads. You can execute JavaScript before this point, so it will load a little later.
Diodeus
btw I'm not sure if there are better hiding techniques (like position: absolute left: -10000000px;) but if you use display: none; most browsers don't load the image
Jiaaro
A: 

solution

Picasa will let external sites load images up to 800px wide... if you try to use any larger than that on an external domain (not picasaweb.google.com) you will just get a 404

fortunately for me 800px is plenty... I was just trying to load the originals, which you're not allowed to do at all haha

Jiaaro