在显示页面之前运行脚本

Question

我已经构建了一个网站，当页面加载时进行一系列计算（基本上它决定了用户的屏幕大小，然后分配所有页面图像大小和位置并应用它们）。 我遇到的问题是连接速度较慢，这是可见的（所有图像都将从角落开始，然后调整大小并重新定位）。 这不是一个大问题，但它有点像眼睛。

我正在使用jquery执行此操作，并且所有计算都发生在$(document).ready ，之前有什么事情要做吗？ 或者我应该使用预加载器？ 什么是好的（queryLoader不适合我，而我能找到的所有其他都只是用于预加载图像）。

我们欢迎所有的建议！

Answer 1

如果你只是担心图像，那么在它们被重新定位之前，如何将它们设计为不可见（显示：无）？

Answer 2

为了扩展Joe的答案，最简单的方法是隐藏所有图像，直到它们加载完毕。 像这样的事情：

$(function() {
  $('img').hide();
  $('img').load(function() { $(this).show() });
});

你甚至可以用CSS预先隐藏它们，但除非上面的方法对你来说有点闪烁，否则我不建议这样做。

Answer 3

如何为主页面和加载器页面使用iframe只包含您需要的js。 由于两者都来自同一个域，因此您不必担心iframe上的跨域限制。

Answer 4

我在iframe环境中遇到了这个问题。 但目前我使用以下解决方法来避免眼睛：

<style>
   .load_class{
            display:block;
            position:absolute;
            top:0;left:0;
            background-color:#fff;width:100%;height:100%;
            z-index:9990;
            text-align:center;
        }
</style>
<script>
   setTimeout("loadingComp()",15000);

   function loadingComp(){
        jQuery("#i_init").fadeOut();
    }
</script>
<div id="i_init" class="load_class">
 <img src="images/loading.gif" alt="Loading..."/>
             Loading...
</div>

但这是一个硬编码解决方案。 一个div将在15秒后淡出:(