Question

现在，我们有一个使用javascript的图片幻灯片。但是，当页面仍然加载时，在读取和执行javascript之前，图像将以正常列出的样式（使用项目符号）简要显示。问题是，我们不希望访客看到＆＃34;裸体＆＃34;图像列表，即使只是短暂的（有时它会持续2-3秒）。我们希望他们立即只看到一个变形为另一个的图像（不是列表）（js的作用）。

这是幻灯片的HTML代码：

<div class="slideshow"> 
     <ul> 
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li>                                  
         <li><img src="images/....jpg" /></li> 
         <li><img src="images/....jpg" /></li> 
     </ul> 
</div>

这是我们使用的幻灯片：

http://www.littlewebthings.com/projects/blinds/

这是JS文件：

http://www.littlewebthings.com/projects/blinds/js/jquery.blinds-0.9.js

我认为这可能是一个缓存问题，因为上面的演示幻灯片只显示了＃34;裸体＆＃34;图像列表一次。一旦它被刷新/重新访问，它就不再显示（或者仍然显示但比第一次显示的速度快得多，它几乎不可察觉）。另一方面，我们继续重读javascript，好像它总是第一次（如果你知道我的意思）。

Answer 1

使用css隐藏所有列表，仅显示第一个图像。因此用户不会看到除第一张图片之外的所有列表。

Answer 2

虽然这并没有直接回答让它立即加载的问题，但是一个选项就是从隐藏<div class="slideshow" id="myId" style="visibility: hidden">的div开始，然后一旦你知道你的JS加载了，就显示它（例如使用jQuery）：

$( "#myId" ).css( "visibility", "visible" );

Answer 3

尝试以这种方式编辑ul样式：

ul{
    list-style:none;
}

ul li{
    position:absolute;
}

列表包装器必须具有固定的高度;）

希望有所帮助

如何让javascript加载更快？

3 个答案: