Application example station http://www.uhuigou.net
image dynamic loading are nothing new, many big station are used, the advantage obviously, mainly to save traffic (including server and client), give the user experience better, can improve the opening speed of the page.
principle is not complicated, or use the original picture img tag, the SRC points to a default insets, such as loading, then customize an img property save pictures of real address, when the user access to the image position, through js control value to custom properties of the value of the SRC.

this function has been making a lot of plugins. I use the call jquery. The lazyload, need to my website to download directly, only need a file this is enough, of course, you also have jqeruy
use method is simple, the original img tag to add a data - address of the original attributes to save the real pictures, example is

  code is as follows:  


<Img class="lazy" SRC="http://bcs.duapp.com/uhuigou/loading.gif" data - the original="http://bcs.duapp.com/uhuigou/201306200831326313.jpg" style="width: 100%; display: inline - block;" >

needs to be dynamically loaded img is so you can write that the jquery. The lazyload only data - the original, style or other attributes according to the need to write casually
the last also the page jquery. Initialize the ready event

  code is as follows:  


$(function () {$(" img. Lazy "). The lazyload ();});

well done!


This concludes the body part