使用Ajax实现图片加载

1.css部分代码

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        img{
            width: 200px;
            height: 230px;
            margin: 10px;
        }
    </style>

2.HTML部分代码

<body>
    <div id="container"></div>
    <button id="load_img">Loading_Img</button>
</body>

3.Ajax部分代码

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    /*给button按钮添加click时间*/
    $("#load_img").on("click",function(){
        /*清空图片*/
        $("#container").empty();
        $.ajax({
            url:"data",
            type:"post",
            dataType:"json",
            success:function(data){
                /*用each遍历，item表示dada.data中的每一个*/
                $.each(data.data,function(i,item){
                    var url=item.url;
                    $("#container").append("<img src='"+url+"'/>");
                })
            }
        })
    })
</script>

实现效果图：

posted @ 2016-09-17 13:35  三高娘子  阅读(2383)  评论(0)    收藏  举报