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

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

</html>



CSS：
.lazy{
    margin-top: 1000px;
}

 

思路是先用ajax请求图片地址，然后在success里面用Lazyload实现加载图片，这种方式效率高，用户亲和力好

 

posted @ 2017-02-06 18:46  麦子TMAC  阅读(3215)  评论(0)    收藏  举报