使用template.js把轮播图的图片渲染到页面后,发现无法显示;这一切是dom的缺失,还是bootstrap插件的沦丧?让我们走进代码的世界,找寻真相。
- 首先,打开控制台发现,图片dom是生成了的,排除dom的缺失
- 其次,换了一个插件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
});
})
}