轮播图被砍头，图片加载到了窗口之外

开发一个个人的购物网站时，轮播图的加载遇上了一个问题：

正确情况应该是这样的：

但很多时候却变成了：

轮播图跑到窗口之上去了。

 

一开始以为可能是轮播图模块还没有加载好就先执行了其js代码，于是将其<script>标签放到了body的底部，但很多时候仍然无法避免。

在其js代码的执行前加了句console.log，发现出现此状况时轮播图的高度是0。

于是现在问题便成了怎么判断图片是否加载完成，之后再去执行相关的js代码。

 

在搜索这个问题的时候，发现了一个用于瀑布流ajax请求的解决方法，即常见的瀑布流都是先在一个空白区域加载提示小图片，然后图片慢慢load上去的，即先占位再加载。

放在我这个问题里恰好也可以这么解决，只是如果我不需要转圈的提示小图片的话，我可以先给放轮播图的div设定好高度，这样即使图片是迟些才加载的也不会出现没头的情况了。

而我放轮播图盒子的宽度是自适应的，所以布局很早就固定好了，不受图片是否加载的影响，宽高比也较为固定，所以我便可以在其js的初始便计算当前页面轮播盒子的宽度，随即设定好。

$('.slideBox').height($('.slideBox').width()*0.76*(1/3));

如此问题便解决了，js代码执行前slideBox就已占位好，所以不会再被砍掉头啦~