Append加载动态轮播

前几天遇到了些小麻烦，不过很快就解决了。之所以要记下来是因为作为一名前端的程序员，要理解页面的加载顺序是最重要的。要不然自己写程序意外的出现bug~~

刚开始写利用Append的时候，利用火狐的firebug查看元素class里面swiper-slide还在，可是轮播的时候没有动态的效果。数据库里有轮播的五条数据。。。。。

首先加载顺序一定要理解：

下面是我的js代码

 $(function(){
     showCarousel();//轮播动态数据
 });
 /***
 * ** Date: 2017/01/09
 * ** Author: Black_Jay郗
 * ** Function: 轮播动态   (需要注意加载顺序)
 ***/
 function showCarousel(){
     //var str001 = ''
     $.ajax({
         url: ‘’,
         type: 'Post',
         dataType: 'json',
         success: function(data) {
             for ( var i = 0 ; i < data.length ; i ++ ) {
                 var url = data[i].Url;
                 var image = data[i].Image;
                 lunbo(url,image);
             }
             //$.parser.parse(str001);
             var mySwiper = new Swiper('#slide',{
                 pagination: '.pagination',
                 slidesPerView: 1,
                 paginationClickable: true,
                 preloadImages: false,
                 lazyLoading: true,
                 autoplay: 5000,
                 autoplayDisableOnInteraction: false,
                 loop: true
             });
         }
     });
     function lunbo(url,image){
         $("#showCarousel").append("<div class='swiper-slide'>"
                 +"<a href='"+url+"'>"
                 +"<img style = 'width:100%;height:200px;' src='"+image+"' />"
                 +"</a>"
                 +"</div>");
     }
 }

想必这样的加载顺序就可以迎刃而解了。

关于页面的加载顺序的分析，以后工作中遇到问题。在与大家一起讨论。。！~