swiper在360浏览器极速模式下图片第一次加载不出来的坑

废话不多说直接上代码

.lunbo1 {width: 1170px;height: 200px;/*height: 100%;*/margin: 30px auto 0 auto;/*overflow: hidden;*/padding-left: 70px;position: relative;
}
.lunbo1 .swiper-container {margin: 0 0 0 15px;
}
.lunbo1 .swiper-button-next, .swiper-button-prev {right: -20px;
}
.lunbo1 .swiper-button-prev:hover {background-color: #82c12f;
}
.lunbo1 .swiper-button-next:hover {background-color: #82c12f;
}
.lunbo2 .swiper-button-prev:hover {background-color: #82c12f;
}
.lunbo2 .swiper-button-next:hover {background-color: #82c12f;
}
.lunbo1 .swiper-button-prev, .swiper-container-rtl .swiper-button-next {width: 30px;height: 35px;background-color: #ccc;position: absolute;top: 50%;left: -20px;
}
.lunbo1 .swiper-button-next, .swiper-button-prev {width: 30px;height: 35px;background-color: #ccc;
}
.lunbo1 .swiper-button-next, .swiper-button-prev {background-size: 20px 20px !important;
}
.lunbo2 {width: 1210px;height: 200px;/*height: 100%;*/margin: 20px auto 30px auto;/*overflow: hidden;*/padding-left: 70px;position: relative;
}
.lunbo2 .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 0;
}
.lunbo2 img {width: 170px;height: 200px;
}
.lunbo2 .swiper-button-prev, .swiper-container-rtl .swiper-button-next {width: 30px;height: 35px;background-color: #ccc;position: absolute;top: 50%;left: 0;
}
.lunbo2 .swiper-button-next, .swiper-button-prev {width: 30px;height: 35px;background-color: #ccc;
}
.lunbo2 .swiper-button-next, .swiper-button-prev {background-size: 20px 20px !important;
}

<div style="background-color:#f6f6f6;overflow:hidden;"><!-- 资质轮播1部分 --><div class="lunbo1"><div class="swiper-container banner_swiper2"><div class="swiper-wrapper">{assign var="productlist" value=$productdata->TakeProductList(15,0,10,"adddate desc")}{foreach from=$productlist item=productinfo}<div class="swiper-slide"><img src="{$productinfo->thumb}" title="{$productinfo->name}" alt="{$productinfo->name}"/></div>{/foreach}</div>   </div><div class="swiper-button-prev z_anniu1 swiper-button-white"></div><div class="swiper-button-next y_anniu1 swiper-button-white"></div></div><!-- 资质轮播2部分 --><div class="lunbo2"><div class="swiper-container banner_swiper3"><div class="swiper-wrapper">{assign var="productlist" value=$productdata->TakeProductList(16,0,10,"adddate desc")}{foreach from=$productlist item=productinfo}<div class="swiper-slide"><img src="{$productinfo->thumb}" title="{$productinfo->name}" alt="{$productinfo->name}"/></div>{/foreach}</div>  </div><div class="swiper-button-prev z_anniu2 swiper-button-white"></div><div class="swiper-button-next y_anniu2 swiper-button-white"></div></div></div>

上面是html，下面是js代码，这些都没有问题，关于上面的assign是什么不用太纠结，这只是PHP的写法

var mySwiper2 = new Swiper('.banner_swiper2', {loop : true,slidesPerView : 3,slidesPerGroup : 1,prevButton:'.z_anniu1',nextButton:'.y_anniu1',
})
var mySwiper3 = new Swiper('.banner_swiper3', {loop : true,slidesPerView : 5,slidesPerGroup : 1,prevButton:'.z_anniu2',nextButton:'.y_anniu2',
})

问题来了，现在我的这些代码是我已经修改过的，之前有什么坑呢，在谷歌，火狐，IE，360的兼容模式下都没有问题，只有在极速模式下回有问题，第一次加载这些代码时轮播2不出来，但是你刷新以后就出来了，找了2个小时，到处去百度是不是兼容性的问题，最后还是什么都写上去还是没有用，但是就在喝完水休息一下后是不是图片本身的问题，因为有的图大有的小，(指的是高度)，然后就不把图片的高度给定了一个200px，然后刷新，解决，希望在你遇到你遇到了这个问题对你有帮助！

swiper在360浏览器极速模式下图片第一次加载不出来的坑相关推荐

极速模式下java无法加载_谷歌和360急速模式下的XMLHttpRequest 的onprogress事件失效...
场景描述上传excel后遍历处理每一行的数据.想在页面上展示进度条,提示目前已经处理到第几条了. 使用XMLHttpRequest2来发送请求,在程序服务器端设置HttpServletRespons ...
360浏览器5兼容模式吗_Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃...
一直使用macOS系统下chrome浏览器下开发,仅仅使用到ant design pro vue 组件库,默认的脚手架配置. 客户使用win7下360安全浏览器访问,自动变成"兼容" ...
vue使用npm不会自己加到plugins_Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃...
一直使用macOS系统下chrome浏览器下开发,仅仅使用到ant design pro vue 组件库,默认的脚手架配置. 客户使用win7下360安全浏览器访问,自动变成"兼容" ...
QQ浏览器及360浏览器兼容模式下怎么处理sessionStorage数据
现在很多网站都需要在兼容模式和极速模式下都适应,开发的时候一般都是谷歌浏览器,前端需要存储一些本地信息,一般用的最多的是localStorage跟sessionStorage.极速模式下或者谷歌浏览器 ...
360浏览器极速模式自动_浏览器正在为网站带来自动暗模式
360浏览器极速模式自动 nalyvme/Shutterstock.comnalyvme / Shutterstock.com Dark mode is now everywhere, includi ...
360 浏览器“兼容模式”下，接口请求缓存问题解决方法
文章目录起因解决方案 1. 在 get 请求的 url 中增加随机标识 2. 请求设置 3. 改为 post 请求起因 360 浏览器"极速模式"采用 Blink ( Web ...
vue检测是不是360浏览器兼容模式_Vue项目 IE/360浏览器兼容模式下打开空白的问题...
记一次bug解决 bug发现项目不复杂,就是一个基于vue-cli3搭建的pc端项目在开发进入后半段的时候发现在360浏览器兼容模式先显示空白而且没有报错,此类问题之前我写react在低版本的qq ...
设置网页默认为360浏览器极速模式打开
设置网页默认为360浏览器极速模式打开在head标签中添加一行代码: <html> <head> <meta name="renderer" con ...
flex与相对定位在国内双核浏览器极速模式下的兼容性问题
在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用IE内核,极速模式采用webkit内 ...

swiper在360浏览器极速模式下图片第一次加载不出来的坑

swiper在360浏览器极速模式下图片第一次加载不出来的坑相关推荐

最新文章

热门文章