如何使javascript加载更快？答案

【问题标题】：How to make javascript load faster?如何使javascript加载更快？
【发布时间】：2010-12-09 09:49:59
【问题描述】：

现在，我们有一个使用 javascript 的图像幻灯片。但是，当页面仍在加载时，图像将在读取和执行 javascript 之前以正常列出的样式（带有项目符号）简要显示。问题是，我们不希望访问者看到“裸体”图像列表，即使只是短暂的（有时会持续 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

我认为这可能是缓存问题，因为上面的演示幻灯片只显示了一次“裸”图像列表。一旦刷新/重新访问，它就不再显示（或仍然显示但比第一次快得多，几乎不引人注目）。另一方面，我们的不断重读 javascript，就好像它总是第一次一样（如果你知道我的意思的话）。

【问题讨论】：

标签： javascript slideshow

【解决方案1】：

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

【讨论】：

您的意思是使用“display: none;”？但这不会一直隐藏其余图像，因为稍后会在幻灯片中调用/显示其他图像？
如果发生这种情况，请使用 js 删除 display:none。那么css规则只有在js被加载之前才有效。
谢谢，我使用了可见性：隐藏。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

ul{
    list-style:none;
}

ul li{
    position:absolute;
}

列表包装器必须有一个固定的高度；）

希望对你有帮助

【讨论】：