IosSlider 图像在初始页面加载时垂直（或分散）加载

Question

这应该是一个简单的修复，但我没有足够的经验来解决问题。我的网站在几个页面上使用了 IosSlider。 IosSlider 页面似乎在将图像加载到实际滑块窗口之前垂直（或分散）加载图像。如何解决此问题以使滑块加载更平滑？所有浏览器都会出现此问题。

http://www.restipe.com/Residential/elegant-home.html

IOSSlider 的 CSS：

       .responsiveHeight {
            height: 0;
            padding: 0 0 40% 0; /* responsive slider height = 40% of the browser width */
            position: relative;
            overflow: visible;
        }

        .responsiveHeight > .inner {
            position: absolute;
            width: 100%;
            height: 100%;

        }

        .iosSlider {
            width: 100%;
            height: 100%;

        }

        .iosSlider .slider {
            width: 100%;
            height: 100%;
        }

        .iosSlider .slider img {
            float: left;
            height: 100%;
            padding-right:2px;
        }

        .responsiveHeight .prevButton {
            position: absolute;
            top: 50%;
            left: 1%;
            width: 20px;
            height: 40px;
            background-image: url(../images/prev.png);      
            z-index: 2;
        }

        .responsiveHeight .nextButton {
            position: absolute;
            top: 50%;
            right:1%;
            width: 20px;
            height: 40px;
            background-image: url(../images/next.png);          
            z-index: 2;
        }

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">      </script>

    <script type="text/javascript" src="../js/jquery.iosslider.js"></script>


<!--IosSlider -->   
    <script>
        $(window).load(function() {

            $('.iosSlider').iosSlider({ 
            desktopClickDrag: true,
            navNextSelector: $('.nextButton'),
            navPrevSelector: $('.prevButton')

             });

        });
    </script>

谢谢， 吉尔

Answer 1

这与加载插件后图像的放置方式有关。滑块的工作方式是将每个图像放置在一个绝对位置，并将其应用于每个单独的图像。浮动元素只会填充与其父容器一样宽，因此当元素尚未绝对放置时，并且父容器为 1140px 宽，593px 的图像只能在其中容纳一次。

现在，这个解决方案并不是 100% 完美，因为插件会稍微调整图像大小，但在大多数情况下，您可以通过设置来解决这个问题：

.iosSlider { overflow: hidden; }
.iosSlider .slider { width: 99999px; }

这将使您的图像与滑块的显示方式非常接近。