Websites, Servers and Images

[K_Drive]

Hello.I am helping create a new website with some other developers. I have two questions about servers and images. One page on the website will be similar to the NetFlix page where a person can browse the selections of movies. We plan to have small popup windows over image maps like the Netflix page. Our popup windows will also have images.Our project manager is worried that this page will load very slowly because of all the images. We plan to hide the popup menus with CSS and JavaScript, and then display them with a mouseOver event.One developer said that Netflix does not download the images for these popups windows until the window is open. He does not know how it is done. I looked at the source code behind the page and the linked JavaScript page in the source HTML page, but I could not figure it out.Does anyone know how to delay the download of images on a page until they are displayed?I have also heard of another way to help with a large amount of images on a website. You set up a separate image server to only handle images. I have only done a small amount of searching on the Internet about this.Does anyone know of a good reference website or book on this?Here is the link to the NetFlix page: http://www.netflix.com/BrowseSelection?lnkctr=nmhbs .Sincerely,K_Drive

[aspnetguy]

Loading all the preview windows at once will make the page loading slow. You could write a javascript funtion that creates the popup window through the DOM (document.createElement,etc) and attach the function to the onmouseover event. You would also need a function to close the popup onmouseout

[Skemcin]

The popup bubble is a page request in itself. So any image that appears in that is simply another page request. Any content you see in the popup bubble is not downloaded with the initial page request. The mouseover function calls a javascript that opens a new popup window that loads a new page. It does this using JSON technology:http://www.netflix.com/JSON/BobData?pos=0&...ovieid=60020009

{"id":"60028312","title":"Lawrence of Arabia","mpaa":"PG","year":"1962","synopsis":"Director David Lean's Oscar-winning epic tells the true-life story of warrior-poet T.E. Lawrence (Peter O'Toole), who helped unite warring Arab tribes so they could strike back against the Turks in World War I. Lushly filmed and expertly acted, this timeless classic underscores the clash between cultures -- and within one man -- that changed the tide of war. Alec Guiness and Anthony Quinn co-star.","genre":"Classics","starring":[{"id":69540,"name":"Peter O'Toole"},{"id":37760,"name":"Alec Guinness"}],"directors":[{"id":53644,"name":"David Lean"}],"starClarityData":{"average":"4.1"}}

That is passed into a javascript (http://www.netflix.com/layout/jscript/pkg-Core-144975.js?v=144975) and eventually processed there by this function function MovieJSONImporter (so it appears).So thats is how they do it. As far as you second server idea - I do not think you will have significant performance gains from doing it that way since every image request would need an absolute path defined and force the page server to do more work - but I could be wrong on that.For a solution - you can be tricky and do it fancy like that or just do simple onmouse over javascript ot open a new winddow - they do this to get around popup blockers.Hope that helps.

[K_Drive]

Skemcin and aspnetguy:I have never heard of JSON, but I will look into it now.I have done a little bit of work with the DOM and createElement. I will explore that possibility.Thank you very much to both of you.K_Drive

[aspnetguy]

JSON is very easy to use.Basically you can eval() the JSON text you receive and it turns into an array of javascript objectsI play around a bit with the Twitter API (RESTful XML and JSON).For example if I make this request (http://twitter.com/statuses/show/247009372.json) it returns the following JSON

[{"user":{"url":"http:\/\/www.geekdaily.net","profile_image_url":"http:\/\/assets2.twitter.com\/system\/user\/profile_image\/8514402\/normal\/homestar_20avatar_201.gif?1188473937","name":"Justin Bezanson","description":"C# web developer","location":"Kingston, Nova Scotia, Canada","id":8514402,"screen_name":"justin_","protected":false},"created_at":"Tue Sep 04 18:35:12 +0000 2007","source":"web","text":"Sad the long weekend is over.","id":247009372}]

You can see the original post here http://twitter.com/justin_/statuses/247009372Then I can do the following with the JSON text.

var json = eval(responseText);	//array of JSON objectsfor(var i=0;i<json.length;i++) {	alert(json[i].text);}

This will alert the contents of my twitter post. JSON makes it very easy, no xml parsing