layui使用动态添加轮播图的坑-bug记录(动态加载成功但是没有效果)

bug情况

我开始使用的是三张本地图片渲染轮播,一切正常,然后我改为了获取数据库数据,然后动态添加div,实现获取网络图片,但是出现了bug,轮播图加载不出来,测试拿到的数据一切正常
我开始错误找错和解决步骤如下(可能大多数人都是如此):
1、先检查返回的数据,一切正常,排除
2、然后检查是不是没有运行到添加代码的地方,处理返回的数据有问题,我测试发现没有问题
3、运行后检查页面,然后发现,那一块动态添加的代码都有了,就是没效果,如下图:
layui使用动态添加轮播图的坑-bug记录(动态加载成功但是没有效果)_第1张图片
左边是轮播位置,右边是动态添加的代码,发现已经添加进来了
4、网上查询一番,发现是没有重新加载的原因,于是我重新加载了,结果不变,依然没有效果

然后就开始如下步骤找是不是其他少见的奇葩错误:
1、我索性直接先动态添加再加载轮播,不信还有错,如下图:
layui使用动态添加轮播图的坑-bug记录(动态加载成功但是没有效果)_第2张图片
上图的getImgList()方法就是获取数据库数据并动态添加到轮播代码区,方法如下:

/*渲染轮播图*/
        function getImgList() {
            $.ajax({
                url: '/file/homePage/img/list',
                success: function (res) {
                    if (res.code === 0) {
                        for (var i = 0; i < res.count; i++) {
                            $('#showList ').append("
+res.data[i].netPath+"\" alt=\"网络错误\" width=\"100%\" height=\"100%\">
\n"
); } } else { layer.msg(res.msg); } } }); }

这样看上去好像没错,但是结果不出所料,还是没效果
静下来想了好久终于缓过神了,调用,ajax发请求,拿到数据动态添加,然后轮播图加载,嗯,顺序错了
看上去没错,但是又是异步搞鬼了,然后随手打印下验证先动态添加还是先走到轮播图加载,结果不出所料,先到轮播图加载!!!!

我的修改方案:还是先加载轮播图,然后将返回的参数传到方法里去,动态添加完了再重新加载!
有人可能会说为什么要自定义方法,直接写到里面不好嘛,参数还不用另外传,直接调,但是我认为既然是一个用于动态添加轮播图代码段的功能,还是封装成应付方法比较好!
代码段如下:

			//layui.use内的代码段
			var ins = carousel.render({
                elem: '#lunbo'
                ,width: '100%'
                ,height:'590px'
                ,arrow: 'always'
            })
            getImgList(ins);	
			//自定义方法
			function getImgList(ins) {
            $.ajax({
                url: '/file/homePage/img/list',
                success: function (res) {
                    if (res.code === 0) {
                        for (var i = 0; i < res.count; i++) {
                            $('#showList ').append("
+res.data[i].netPath+"\" alt=\"网络错误\" width=\"100%\" height=\"100%\">
\n"
); ins.reload({ elem: '#lunbo' }) } } else { layer.msg(res.msg); } } }); }

嗯,又是一个不熟悉前端的被异步戏耍的一次!!!

你可能感兴趣的:(springboot,web服务器,layui,bug,javascript,轮播图)