<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQ image lazy loading</title> <style> body{ margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img{ border: none; vertical-align: middle; } </style> </head> <body> <ul> <li><img src="img/loading.gif" width="300" height="200" class="lazy" data-original="img/img1.gif" /></li> <li><img src="img/loading.gif" width="300" height="200" class="lazy" data-original="img/img2.gif" /></li> <li><img src="img/loading.gif" width="300" height="200" class="lazy" data-original="img/img3.gif" /></li> <li><img src="img/loading.gif" width="300" height="200" class="lazy" data-original="img/img4.gif" /></li> </ul> <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/jquery.lazyload.min.js"></script> <script> $("img.lazy").lazyload({effect : "fadeIn"}); </script> </body> </html>
Effect picture: