javascript - 为什么 slider 插件在准备生成之前显示？

Question

我使用 jquery slider 插件“slippry”:

http://slippry.com/

我按照教程写的是这样的:

 $(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>

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

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

此外，如果我按 f5 则不会出现此问题(可能已缓存？)但是当我再次在地址栏按 enter 进入页面时，它再次出现同样的问题。如何解决这个问题？谢谢

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更多详情