template.js动态展示轮播图,轮播图不显示问题

使用template.js把轮播图的图片渲染到页面后,发现无法显示;这一切是dom的缺失,还是bootstrap插件的沦丧?让我们走进代码的世界,找寻真相。

  1. 首先,打开控制台发现,图片dom是生成了的,排除dom的缺失
  2. 其次,换了一个插件Swiper,发现效果一样,排除插件的沦丧

把动态数据换成假数据,发现没问题;那就只有从轮播图本身去寻找答案了

最后发现,按道理轮播图的实例化是在dom生成后,所以假数据没问题,而采用template.js后实例化轮播图的时候dom还没生成完,所以最后dom虽然有了,但是轮播图实例化其实失败了。

解决方法就是:在dom生成之后再实例化轮播图,如下:

// 数据
  function getCooperative() {
    $.get('/api/article/findFriend', {}, function (res) {
      let html = template('cooperativeChild', res.data)
      document.getElementById('cooperative').innerHTML = html
      jQuery('.flexslider').flexslider({
        animation: "fade",
        prevText: "",
        nextText: "",
        slideshow: true
      });
    })
  }

你可能感兴趣的:(前端,javascript,前端,bootstrap)