JQ 图片的懒加载
程序员文章站
2022-07-05 23:43:42
...
<!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 图片懒加载</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>
效果图:
上一篇: JS 获取移动终端浏览器版本信息
下一篇: prototype原型链