Question

我有问题，我想显示响应式滑动图像， http://responsiveslides.com/

我的代码

$('document').ready(function () {


    $.getScript("sliding_zoom/responsiveslides.js", function () {

        $(".rslides").responsiveSlides({
        maxwidth: 1024,
        speed: 2000,
        pause: false
    });


})

})

我的HTML

           <ul class="rslides" id="Ul1">
                    <li>

                        <a href="Images/noimage.jpg" class="fancybox" rel="fancybox" title="SHAKEOUT">


                            <img src="Images/Linear_Motion_Shakeout_1.jpg" alt="" />


                        </a>



                    </li>
                    <li>
                        <a href="Images/noimage.jpg" class="fancybox" rel="fancybox" title="SHAKEOUT ">
                            <img src="Images/Shakeout.jpg" alt="" />



                        </a>

                    </li>


                </ul>

上面的代码工作正常，但问题是由于互联网带宽缓慢或可能是一些问题。我逐个加载所有图像（意味着用户能够看到显示的所有图像jquery插件完全加载后，在垂直方向上停留一段时间，并且所有图像都处于正常位置。

Answer 1

$('document').ready(function () {

表示文档准备就绪时执行（页面已完全加载）。

将代码放在script标记中作为body中的第一个元素。

<body>
    <script>
         $.getScript("sliding_zoom/responsiveslides.js", function () {

           $(".rslides").responsiveSlides({
            maxwidth: 1024,
           speed: 2000,
           pause: false
        });

    </script>
    <!-- Rest of the HTML -->
</body>

一旦读取它就会执行代码。

Answer 2

错误的方式：

$('document').ready(function () {

})

正确的方式：

$(document).ready(function() {
    //your code goes here 
});

这将在文档结构准备就绪时运行脚本。

在html加载之前加载jquery插件和jquery

2 个答案: