layui轮播图组件，容器高度根据图片的高度动态设置，有的时候显示不出来的问题？
$(function () {
var ins;
layui.use('carousel', function () {
var $ = layui.$
var W = $('#carousel').width();//获取容器的宽度
var screenImage = $('#carousel img');//获取轮播图DOM
//console.log(screenImage);
var theImage = new Image();
theImage.src = screenImage.attr("src");
//console.log(screenImage.attr("src"))
var b = theImage.width / theImage.height;//获取轮播图的原始宽高比例
//console.log((W / b).toString() + "px");
//上面是获取第一个轮播图的宽度和高度
var carousel = layui.carousel;
ins = carousel.render({
elem: '#carousel'
, width: '100%' //设置容器宽度
, height: (W / b + 10).toString() + "px"
, arrow: 'none' //始终显示箭头
, anim: 'default' //切换动画方式
, autoplay: 'true'
, trigger: 'scroll'
, interval: 5000
});
});
$("#carousel").on("touchstart", function (e) {
var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
console.log(startX);
$(this).on('touchmove', function (e) {
arguments[0].preventDefault();//阻止手机浏览器默认事件
});
$(this).on('touchend', function (e) {
var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
e.stopPropagation();//停止DOM事件逐层往上传播
if (endX - startX > 30) {
ins.slide("sub");
}
else if (startX - endX > 30) {
ins.slide("add");
}
$(this).off('touchmove touchend');
});
});
});
上面是有问题的代码，$(function (){}); 是等待页面的dom加载完毕就开始执行了，这个时候获取比如图片比较大，网速比较差，真实的图片还没有加载完毕，因此获取图片高度的代码就无法获取到，然后给轮播容器赋值的时候就失败，轮播图就显示不出来了。
改成下面的window.onload=function (){} ，这样是等页面包含里面的资源都加载完毕才会执行获取图片高度代码，这样能保证100%获取的到。
window.onload=function (){
var ins;
layui.use('carousel', function () {
var $ = layui.$
var W = $('#carousel').width();//获取容器的宽度
var screenImage = $('#carousel img');//获取轮播图DOM
//console.log(screenImage);
var theImage = new Image();
theImage.src = screenImage.attr("src");
//console.log(screenImage.attr("src"))
var b = theImage.width / theImage.height;//获取轮播图的原始宽高比例
//console.log((W / b).toString() + "px");
//上面是获取第一个轮播图的宽度和高度
var carousel = layui.carousel;
ins = carousel.render({
elem: '#carousel'
, width: '100%' //设置容器宽度
, height: (W / b + 10).toString() + "px"
, arrow: 'none' //始终显示箭头
, anim: 'default' //切换动画方式
, autoplay: 'true'
, trigger: 'scroll'
, interval: 5000
});
});
$("#carousel").on("touchstart", function (e) {
var startX = e.originalEvent.targetTouches[0].pageX;//开始坐标X
console.log(startX);
$(this).on('touchmove', function (e) {
arguments[0].preventDefault();//阻止手机浏览器默认事件
});
$(this).on('touchend', function (e) {
var endX = e.originalEvent.changedTouches[0].pageX;//结束坐标X
e.stopPropagation();//停止DOM事件逐层往上传播
if (endX - startX > 30) {
ins.slide("sub");
}
else if (startX - endX > 30) {
ins.slide("add");
}
$(this).off('touchmove touchend');
});
});
}
版权声明：若无特殊注明，本文皆为《菜鸟站长》原创，转载请保留文章出处。
本文链接：layui轮播图组件，容器高度根据图片的高度动态设置，有的时候显示不出来的问题？ - https://wlphp.com/?post=401
