为什么滑块插件在准备生成之前显示？

Question

我使用 jquery 滑块插件“slippry”：

我是按照教程写的：

 $(document).ready(function () {
                $('#item').slippry();
            });
        </script>

和Html

        <ul id="item">
            <?php
            foreach ($banner_list as $key => $banner) {
                echo "<li>";
                echo "<a href='#slide'" . $key . "><img src='" . site_url("banner/" . $banner["image_url"]) . "'></a>";
                echo "</li>";
            }
            ?>
        </ul>

问题是，滑块在未准备好时会显示一秒钟。

一秒钟后，生成并显示如下

另外，如果我按f5那么它不会有这个问题（可能缓存？）但是当我在地址栏按回车再次进入页面时它再次出现同样的问题。如何解决这个问题？谢谢

Answer 1

尝试

$(document).ready(function () {
     $('#item').slippry();
     $('#item').show();
});

和

#item{
    display:none;
}

为了防止回流（页面在图像加载之前上下跳动）为 #item 创建一个容器并应用以下 css

#item{
        display:none;
        padding-bottom:30%;
    }

#item-container{
        position: relative;
        height: 0;
        overflow: hidden;
    }

#item img{
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
    }

有关详细信息，请参阅 how to prevent reflow

为什么滑块插件在准备生成之前显示？

Why the slider plugin show before it is ready to generate?

html

javascript

css

jquery

slider