<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>This is a ajax test</title> <script type="text/javascript" src="js/jquery-3.1.1.js"></script> <script type="text/javascript" src="js/jquery.lazyload.js"></script> <script type="text/javascript"> $(function() { url = $.ajax({ type: "get", url: "img_url.txt", async: true, success: function() { $("img.lazy").attr("data-original", url.responseText); $("img.lazy").lazyload({ effect: "fadeIn", }); } }); }); </script> <link rel="stylesheet" href="css/img.css" /> </head> <body> <img src="img/bmw_m1_hood.jpg" width="100px" height="100px"> <img src="img/bmw_m1_hood.jpg" width="100px" height="100px"> <img src="img/bmw_m1_hood.jpg" width="100px" height="100px"> <img src="img/bmw_m1_hood.jpg" width="100px" height="100px"> <img src="img/bmw_m1_hood.jpg" width="100px" height="100px"> <img src="img/bmw_m1_hood.jpg" width="100px" height="100px"> </body> </html>
lazyload使用ajax实现图片异步加载
最新推荐文章于 2021-03-12 17:50:01 发布