Jquery ajax 与 jquery.lazyload.min.js的混合使用（实现图片异步加载）

[ 2020-02-20 10:30:53 | 作者: admin ]

字号: 大 | 中 | 小

思路是先用ajax请求图片地址，然后在success里面用jquery.lazyload.min.js实现加载图片，这种方式效率高，用户亲和力好
来源：https://www.cnblogs.com/yzjT-mac/p/6371468.html

一般使用格式：

$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});

ajax加载图片的时候，上面的使用方式就无效了，需要在加载后执行代码。

<!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/test_js.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 class="lazy" data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
   <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
   <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
   <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
   <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
   <img class="lazy" data-original="img/bmw_m1_hood.jpg" width="100px" height="100px">
   </body>

</html>

CSS：

.lazy{
margin-top: 1000px;
}