在所有图像完全加载之前，如何隐藏页面内容？

Question

我正在尝试优化一个加载非常糟糕的网站。 我已经重新排序、压缩和缩小了 js 和 css，但最大的问题是图像。 该站点中有一些非常重的图像，因此当它开始加载内容时会在加载所有图像的同时跳转。

我无法手动设置包含图像的 div 的高度，因为它们是用户提交的，虽然宽度是固定值，但高度不是。

我知道这可能不是一个好习惯，但我认为页面在显示内容之前需要两秒钟更好，那两秒钟内它会变得跳跃且无法使用。

1.) 这在技术上可行吗？ 如何？ （我想知道这一点，即使这不是一个好习惯）

2.) 如果这不是一个好习惯，你将如何避免这个问题？

Answer 1

使用JQuery非常容易。 无论如何，我建议使用该框架，即使它不是针对此特定解决方案：

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

像这样使用它：

preload([
    'img/apple.jpg',
    'img/banana.jpg',
    'img/pear.jpg'
]);

使用 CSS 和 JQuery 可以轻松隐藏您的站点：

CSS：

body {
    display:none;
}

JQuery：

$(function(){
    $('body').show();
    // or fade it in: $('body').fadeIn();
});

Answer 2

在 Body 标签之后，添加一个 Div 元素以覆盖页面的整个长度和宽度，使其成为白色背景或添加“加载”图像，将其 z-index 设置为 Max（9999 或其他东西），使其位于顶部一切，并给它一些ID /名称

并使用带有 Body onLoad 事件的 Javascript 来隐藏或删除该 Div 元素。

就像是

<body onload='document.body.removeChild(document.getElementById("bigDiv"));'>

<div style="width:100%;height:100%;background:white;" id=bigDiv>Loading...</div>

Answer 3

首先要检查的重要事项 - 确保图像是可缓存的。 有时会禁用图像缓存。 检查的方法是直接调用网络服务器：

 telnet localhost 8080
 GET /images/flibble.gif HTTP/1.0

并查看返回的内容。 它应该返回类似 Expires: 或 Cache-Control 的内容。

这个页面似乎描述得很好： http://www.web-caching.com/mnot_tutorial/how.html

另一个技巧是在标签中指定图像的大小。 这极大地提高了性能，因为浏览器不需要等到页面加载完毕。

Answer 4

我以前写过自己的 js 图像预加载器，我要发布的内容与它伪相似，但需要一些工作。 基本上，为了使您的页面加载良好，答案不是隐藏主体以阻止它跳来跳去，而是美化图像加载时发生的情况。 除了把婴儿和洗澡水一起扔掉之外，如果用户在等待时可以看到发生的事情，通常网站似乎加载速度更快。

因此，您需要做的（对于每个图像，或至少每个主要或大图像）是在图像加载时显示一个加载 gif（查看http://ajaxload.info ），然后当它完成时，您可以使用 jQuery 来将其容器设置为正确的高度并淡入图像。 这会阻止你的页面跳来跳去（或者更确切地说，让它在跳转时看起来更漂亮）。

为了达到这种效果，这样的事情应该可以解决问题：

function imageLoader(elem)
{
  //set all images in this elem to opacity 0
  elem.children('img').css('opacity', '0');
  var image = new Image();
  //show loading image
  elem.append('html for loading image');

  //when the image loads, animate the height of the elem and fade in image
  image.onload=function()
  { 
       var h = image.height;
       elem.animate({height:h+'px'}, function(){
         elem.children('img').fadeIn();
         elem.children('html for loading image').remove(); 
       });
  };

  image.src=elem.children('img').attr('src');
}

像这样使用它：

imageLoader($('someElementWithAnImageTagInside'));

同样，这实际上只是伪代码，但希望能给您一些想法。

希望这可以帮助

Answer 5

你可以使用阻止插件来阻止页面。 关联

在所有图像完全加载之前，如何隐藏页面内容？

问题描述

5 个解决方案

解决方案1
1 已采纳 2011-08-11 15:40:29

解决方案2
1 2011-08-11 15:40:36

解决方案3
1 2011-08-11 15:42:33

解决方案4
1 2011-08-11 15:58:05

解决方案5
0 2011-08-11 16:15:03

在所有图像完全加载之前，如何隐藏页面内容？

问题描述

5 个解决方案

解决方案1 1 已采纳 2011-08-11 15:40:29

解决方案2 1 2011-08-11 15:40:36

解决方案3 1 2011-08-11 15:42:33

解决方案4 1 2011-08-11 15:58:05

解决方案5 0 2011-08-11 16:15:03

解决方案1
1 已采纳 2011-08-11 15:40:29

解决方案2
1 2011-08-11 15:40:36

解决方案3
1 2011-08-11 15:42:33

解决方案4
1 2011-08-11 15:58:05

解决方案5
0 2011-08-11 16:15:03