Image Download Management

Fast and smooth loading of images is one of the important components of a good web interface. In addition, there are more and more sites that use large photographs in design; it is especially important for such projects to ensure that the graphics are loaded correctly. This article describes several techniques that will help control the loading of images.

Using a container for each image

A simple way that you can apply to any image on the site. The fact is that each picture is wrapped in a DIV that prevents line-by-line loading:
')

<div class="img_wrapper"> <img src="comicbookguy.jpg" alt=""/> </div> 

With the help of the container, you can control the aspect ratio of the image, as well as use the loading indicator, which is very convenient if the images are heavy.

For example, to set the aspect ratio to 4: 3, you can use the following CSS:

 .img_wrapper{ position: relative; padding-top: 75%; overflow: hidden; } .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; } 

In order for the image to be displayed in the browser only after full loading, you need to add an onload event for the image and use JavaScript, which will handle the event:

 <div> <img src="comicbookguy.jpg" alt="" onload="imgLoaded(this)"/> </div> 

 function imgLoaded(img){ var $img = $(img); $img.parent().addClass('loaded'); }; 

The function code inside the HEAD tag must be located at the very end, after any jQuery or other plugin. After the image is fully uploaded, it must be shown on the page:

 .img_wrapper.loaded img{ opacity: 1; } 

For the effect of the smooth appearance of the image, you can use the CSS3 transition:

 .img_wrapper img{ position: absolute; top: 0; width: 100%; opacity: 0; -webkit-transition: opacity 150ms; -moz-transition: opacity 150ms; -ms-transition: opacity 150ms; transition: opacity 150ms; } 

A live example of this method can be viewed at Codepen .

Using a container for multiple images

The previous method is well suited for individual images, but what if there are many of them on the page, for example, a photo gallery or a slider? It is inexpedient to load everything at once - pictures can weigh a lot. To solve this problem, you can force JavaScript to load only the images that are currently needed. Example of HTML markup for a slideshow:

 <div id="Slideshow"> <img src="slide_1.jpg" alt="" onload="slideLoaded(this)" /> <img src="slide_2.jpg" alt="" onload="slideLoaded(this)" /> <img src="slide_3.jpg" alt="" onload="slideLoaded(this)" /> </div> 

We use the slideLoaded () function to control the process:

 function slideLoaded(img){ var $img = $(img), $slideWrapper = $img.parent(), total = $slideWrapper.find('img').length, percentLoaded = null; $img.addClass('loaded'); var loaded = $slideWrapper.find('.loaded').length; if(loaded == total){ percentLoaded = 100; // INSTANTIATE PLUGIN $slideWrapper.easyFader(); } else { // TRACK PROGRESS percentLoaded = loaded/total * 100; }; }; 

Uploaded images are assigned a class of loaded, and also shows the overall progress. And again, JavaScript should be placed at the end of the HEAD tag, after everything else.

Caching

On graphically heavy sites, it is possible in the background, invisibly to the user, to load images into the browser cache. For example, there is a multipage website, on one of the internal pages of which there is a lot of graphic content. In this case, it will be advisable to load images into the cache before the user has moved to the desired page. addresses of pictures in the array:

 <script> var heroArray = [ '/uploads/hero_about.jpg', '/uploads/hero_history.jpg', '/uploads/hero_contact.jpg', '/uploads/hero_services.jpg' ] </script> 

When a visitor enters the site, after loading the main page, images in the cache begin to load. In order for caching to not interfere with the display of current content, you need to add JavaScript functionality to the window load event:

 function preCacheHeros(){ $.each(heroArray, function(){ var img = new Image(); img.src = this; }); }; $(window).load(function(){ preCacheHeros(); }); 

This method improves the usability of the site, however, gives additional load on the server. This should be borne in mind when implementing this functionality. In addition, it is necessary to take into account the possible paths of visitors to the site and cache the images located on the pages that the user is likely to visit. To understand such paths through the site, it is necessary to analyze the statistics of attendance.

Event download

the way is that the images begin to load after a certain event. This increases productivity and saves user traffic. HTML Markup:

 <div class="img_wrapper lazy_load"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="comicbookguy.jpg" alt="Comic Book Guy" /> </div> 

It is worth noting that the URL image is specified in data-src, and not in src. It is necessary that the browser does not download the image immediately. Instead, a transparent pixel is loaded into src in the GIF specified in base64, which reduces the number of accesses to the server.

All that remains is to change the src value to data-src for the required event. JavaScript allows you to download images gradually:

 function lazyLoad(){ var $images = $('.lazy_load'); $images.each(function(){ var $img = $(this), src = $img.attr('data-src'); $img .on('load',imgLoaded($img[0])) .attr('src',src); }); }; $(window).load(function(){ lazyLoad(); }; 

Conclusion

There is no one optimal way to manage the loading of images on the site. In each case it is necessary to choose a suitable method, as well as combine several, if appropriate. One of the main points that need to be paid attention to is performance and traffic. Simply put, first of all it is worth thinking about how it will be more convenient for the site user.