AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
Bit of help needed.
I've coded my personal website (link in sig) to pull photos from flickr into my 'portfolio' page. The call to flickr seems to take an age to come back so I'm using AJAX calling a PHP script to process it in the background and make sure the site doesn't hang waiting for the response.
Problem now is that the site loads, and people are clicking the portfolio page before the AJAX finishes, leaving the portfolio looking empty. It takes a few seconds before all 9 images suddenly appear- give it a go and see what I mean.
Instead I want to be able to show images much quicker, say 1 at a time so people aren't waiting.
Any ideas on how I can break down the response to deal with it in parts rather than all in one lump?
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
By the way, ignore the fact that some stuff doesn't link properly - work in progress, I'm just trying to sort out this problem first.
|
noshua
Member
Registered: 19th Nov 08
User status: Offline
|
Are you aware that the hyperlink on the actual images doesn't work either?
What code/script are you using to pull the images?
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
Yeah, the link on the pictures is something I've still to sort - going to animate it so they 'pop' out to a larger size to view them.....
Using Jquery to call a short PHP page, which is linked to 'PHPFlickr' which handles calling the flickr API.
[Edited on 17-07-2010 by AndyKent]
|
noshua
Member
Registered: 19th Nov 08
User status: Offline
|
Have you considered using LightBox (http://www.huddletogether.com/projects/lightbox2/) and try to link it with Flickr? That could possibly eliminate the problem - googling "lightbox flickr" has some solutions.
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
Interesting, I'll check it out.
I was after something bespoke looking to fit inwoth the style of my site but the further I get the more complex it's becoming!!!
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
Use Jquery or Prototype. You can set an on start and and on loaded thing in your JavaScript so you can display a throbber while it's loading.
|
ed
Member
Registered: 10th Sep 03
User status: Offline
|
You might want to also preload the images too.
|
noshua
Member
Registered: 19th Nov 08
User status: Offline
|
You should be able to modify the JavaScript/css to match the layout of your website
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
quote:
Originally posted by ed
You might want to also preload the images too.
Preloading images (plenty of examples about if you google 'jquery preload images') would solve it and just displayer a throbber (loading gif etc) whilst doing it.
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
The loading of images isn't really a problem though. It seems to me that there is a long delay between asking Flickr for the latest images added to my portfolio and getting the array of details back. Once my script gets these it's quick to build the image links and grabs the images very quickly.
Besides, I can't preloaded anything when I don't know what images are going to be shown.....
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
The only delay is the images loading (blank image placeholders for a few secs) once you've got the 200/complete on the ajax function and you're changing the innerHTML. Once the images are browser cached, the throbber is displayed for a few seconds and the images load instantly. Preloading the images and displaying the throbber for a few seconds longer would solve this.
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
How did you find that out 
I'm using Chrome's Developer bar and putting breakpoints on certain parts of the script to see how long the waits are and I thought it was as I first described.....
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
quote:
Originally posted by AndyKent
How did you find that out
I'm using Chrome's Developer bar and putting breakpoints on certain parts of the script to see how long the waits are and I thought it was as I first described.....
I think you're code is pretty sound, i think it's down to the Flickr servers being a little slow in returning the images (as i said i don't have any issues once the images are cached and i've tried this on a few browsers and two different net connections). By all means i could be talking bollocks, but it's the only issue i actually see
My solution to this would be to get your functions.php script to return a delimiter'd array string 'www.flickr.com/image1.gif;www.flickr.com/image2.gif' (etc) on the Ajax success, then split that, preload the images (usually you create dummy img's then check for when they complete), generate the HTML then do the remove throbber/innerHTML replace. There's probably a better way in doing this though like Ajax'ing the whole Flickr API (i don't know the API but i'm assuming the reason for php'ing it is that you're having to parse sensitive info to API to get the images?).
Also depending on how often you update (+ bandwidth) your flickr, you could chron job it to download the new images to your host (reference them in SQL/flat-file/XML) and load them that way although you still probably want to preload them.
Also if you are preloading using dummy img tags, have a looking into the cache side of things. Again i could be talking shite (feel free to let me know lol) but I have a feeling that doing it this way bypasses the browsers cache, so the page is always fetching the images rather than the browser loading them up from cache which obviously gobbles your bandwidth.
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
Sounds like a decent plan, I'll that out. Think I get the point your making now, didn't earlier.....
The only reason I'm PHPing to flickr is that I came across a standard access library suggested on the API help pages - some guy had created it to simplify the calls so seemed like a good idea. The only 'sensitive' issue is my username/userid which isn't really that sensitive at all. Just means I can keep the level of code down in my own pages rather than building all the queries totally from scratch.
Bandwidth shouldn't be much of an issue with the limited pageviews I'm expecting tbh.
I see what you're saying though, it'll always be loading from scratch so isn't really the optimal way of doing it.
Besides, I've no idea what I'm doing when it comes to cron jobs so I might give that part a miss for now!
|
AndyKent
Member
Registered: 3rd Sep 05
User status: Offline
|
Oh, and thanks 
|
Dom
Member
Registered: 13th Sep 03
User status: Offline
|
Yeah probably the simplest solution, but definitely preload the images especially if you're not worried about bandwidth as that should solve the issue (well, the end-user just sees the throbber for a few seconds longer).
Although doing it all in Jquery/Ajax doesn't look too bad to be honest as the Flickr API looks pretty straight forward. >HERE< is an example of the API in JQuery/Ajax and you'd only need to strip out the second ajax call for the GEO location.
And cron jobs are a piece of piss especially if you have access to the new cPanel X interface. Only issue i tend to stumble upon is file permission causing the job not to run, but it's easily sorted.
But yeah, not worries 
|
