Nivo 滑块有时第一次无法正常工作答案

【问题标题】：Nivo slider not working properly at first time sometimesNivo 滑块有时第一次无法正常工作
【发布时间】：2014-01-15 23:40:26
【问题描述】：

我有一个网站。有些页面有滑块，有些则没有。我对 nivo 滑块有这个问题。有时，不知道什么时候，滑块没有加载，所以没有显示图像。如果您再次单击同一页面，则滑块加载正确并且一切正常。问题不是标准的，您必须通过导航到所有页面来尝试多次。请检查一下，花 1-2 分钟从菜单栏访问所有页面，以便查看问题。问题更常见于 chrome - IE。链接在这里http://www.secureshop.gr/POOL/citycars/website

提前谢谢你。

【问题讨论】：

重现问题，但这只是因为超时（可能与访问慢主机@.gr有关）。您正在使用大量脚本并尝试一次加载 500kb 以上的高分辨率图像。
我不认为主机慢。许多站点都位于那里，这些都可以。也许 Nivo 滑块有错误？搜索了网络，但找不到类似的内容。
好吧，我又玩了大约 5 分钟，但由于所有 images 都已加载到我的 cache 中，因此无法再次重现该问题。我认为您应该研究某种图像压缩，因为如果 DOM 尚未准备好，脚本，尤其是插件，将 timeout。

标签： javascript jquery html css

【解决方案1】：

也许可以在主体的 BASE 处加载 Nivo 的脚本，以确保它不会在 head 中运行并导致任何类型的 timeout 问题。

一旦DOM 知道有一个img，它就会继续，并且该图像将同时加载，同时它会沿着你的HTML 的其余部分前进。也许所有imgs 都没有下载，因此Nivo Slider 没有正确呈现它。

<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 5000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: true, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: '', // Prev directionNav text
        nextText: '', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
</script>
</body>

【讨论】：