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秒后淡出:(

在显示页面之前运行脚本

4 个答案: