Issue link: https://read.uberflip.com/i/1146286
Google | 121 The second extra request is for http://www.google.com/images/nav_logo3.png, shown in Figure 15-15. This is a CSS sprite, a combination of images that was described in Chapter 1. I say it is not part of the page because it is loaded after the page is done, as part of the onload event in the Google home page: onload="sf();if(document.images){new Image( ).src='/images/nav_logo3.png'}" The sf( ) function call sets the input focus to the search field. The second statement creates an image object using new Image( ). The image object's src attribute is set to /images/nav_logo3.png. This is a typical way to load images dynamically, except for one thing: the new image isn't assigned to a variable. There is no easy way for the page to access this image later. That's OK, though, because this page has no inten- tion of using the image. The nav_logo3.png image is downloaded in anticipation of future pages the user is expected to visit. Notice how this CSS sprite has the next and previous arrows used to page through the search results. It also contains images used in other pages, such as a checkout button and shopping cart. This is called preloading. In situations where the next page the user will visit is highly predictable, components needed by that subsequent page are downloaded in the background. In the Google page, however, there is one problem: nav_logo3.png isn't used by any subsequent pages. After submitting a search from http://www.google.com, the user goes to http://www.google.com/search. The search results page loads http:// www.google.com/images/nav_logo.png (no "3" after "logo"). As shown in Figure 15-16, nav_logo.png is similar to nav_logo3.png. It's also a CSS sprite. Figure 15-14. http://www.google.com/favicon.ico Figure 15-15. http://www.google.com/images/nav_logo3.png Figure 15-16. http://www.google.com/images/nav_logo.png
