lazyload使用ajax实现图片异步加载

最新推荐文章于 2021-08-05 18:21:34 发布

glp717

最新推荐文章于 2021-08-05 18:21:34 发布

阅读量2.4k

点赞数

分类专栏： lazyload.js 文章标签： Lazyload ajax请求图片 lazyload使用ajax实现图片异步

lazyload.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>