在所有图像完全加载之前，如何隐藏页面内容？
[英]How can I hide a page contents until all the images are fully loaded?
问题描述
I am trying to optimize a site which loads terribly.
我正在尝试优化一个加载非常糟糕的网站。 I already reordered, compressed and minified js and css, but the biggest problem are the images.我已经重新排序、压缩和缩小了 js 和 css，但最大的问题是图像。 This site has some really heavy images in it, so when it starts to load the content jumps while all the images are being loaded.该站点中有一些非常重的图像，因此当它开始加载内容时会在加载所有图像的同时跳转。
I cant manually set the height of the divs containing the images because they are user submitted, and although the width is a fixed value, height isn't.我无法手动设置包含图像的 div 的高度，因为它们是用户提交的，虽然宽度是固定值，但高度不是。
I understand that this is probably not a good practice, but I think its better that the page takes two seconds before showing contents, that it being jumpy and unusable for those two seconds.我知道这可能不是一个好习惯，但我认为页面在显示内容之前需要两秒钟更好，那两秒钟内它会变得跳跃且无法使用。
1.) Is this technically possible? 1.) 这在技术上可行吗？ How?如何？ (I would like to know this, even if its not a good practice) （我想知道这一点，即使这不是一个好习惯）
2.) If this is not a good practice, how would you avoid this problem? 2.) 如果这不是一个好习惯，你将如何避免这个问题？
5 个解决方案
解决方案1
1 已采纳 2011-08-11 15:40:29
It's extremely easy with JQuery .使用JQuery非常容易。 I'd recommend using that framework anyway, even if it wasn't for this particular solution:无论如何，我建议使用该框架，即使它不是针对此特定解决方案：
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
Use it like this:像这样使用它：
preload([
'img/apple.jpg',
'img/banana.jpg',
'img/pear.jpg'
]);
Hiding your site at this point is easy with CSS and JQuery:使用 CSS 和 JQuery 可以轻松隐藏您的站点：
CSS: CSS：
body {
display:none;
}
JQuery: JQuery：
$(function(){
$('body').show();
// or fade it in: $('body').fadeIn();
});
解决方案2
1 2011-08-11 15:40:36
Just after the Body tag, add a Div Element to cover the whole length and breadth of the page, make it white background or add a "Loading" image, set its z-index to Max (9999 or something) so its on top of everything, and give it some ID/Name在 Body 标签之后，添加一个 Div 元素以覆盖页面的整个长度和宽度，使其成为白色背景或添加“加载”图像，将其 z-index 设置为 Max（9999 或其他东西），使其位于顶部一切，并给它一些ID /名称
and Use a Javascript with Body onLoad Event to hide or remove that Div Element.并使用带有 Body onLoad 事件的 Javascript 来隐藏或删除该 Div 元素。
Something like就像是
<body onload='document.body.removeChild(document.getElementById("bigDiv"));'>
<div style="width:100%;height:100%;background:white;" id=bigDiv>Loading...</div>
解决方案3
1 2011-08-11 15:42:33
First important thing to check - make sure the images are cacheable.首先要检查的重要事项 - 确保图像是可缓存的。 Sometimes caching of images is disabled.有时会禁用图像缓存。 The way to check this is a direct call to the webserver:检查的方法是直接调用网络服务器：
telnet localhost 8080
GET /images/flibble.gif HTTP/1.0
And see what is returned.并查看返回的内容。 It should return something like Expires: or Cache-Control.它应该返回类似 Expires: 或 Cache-Control 的内容。
This page seems to describe it well: http://www.web-caching.com/mnot_tutorial/how.html这个页面似乎描述得很好： http://www.web-caching.com/mnot_tutorial/how.html
The other trick is to specify the size of the images in the tag.另一个技巧是在标签中指定图像的大小。 This vastly improves performance because the browser doesn't need to wait until the page is loaded.这极大地提高了性能，因为浏览器不需要等到页面加载完毕。
解决方案4
1 2011-08-11 15:58:05
I've written my own js image preloader before, what I'm about to post is pseudo-similar to it but will need some work.我以前写过自己的 js 图像预加载器，我要发布的内容与它伪相似，但需要一些工作。 Basically in order to make your page load nicely, the answer isn't to hide the body to stop it jumping around, rather beautify what happens when the images do load.基本上，为了使您的页面加载良好，答案不是隐藏主体以阻止它跳来跳去，而是美化图像加载时发生的情况。 Besides throwing out the baby with the bath water, generally sites appear to the user to load faster if they can see something happening while they wait.除了把婴儿和洗澡水一起扔掉之外，如果用户在等待时可以看到发生的事情，通常网站似乎加载速度更快。
So what you need to do (for each image, or atleast each major or large image) is display a loading gif (check out http://ajaxload.info ) while the image loads, then when it is finished you can use jQuery to animate it's container to the correct height and fade in the image.因此，您需要做的（对于每个图像，或至少每个主要或大图像）是在图像加载时显示一个加载 gif（查看http://ajaxload.info ），然后当它完成时，您可以使用 jQuery 来将其容器设置为正确的高度并淡入图像。 This stops your page jumping around (or rather makes it look prettier while it jumps).这会阻止你的页面跳来跳去（或者更确切地说，让它在跳转时看起来更漂亮）。
To acheive this effect, something like this should do the trick:为了达到这种效果，这样的事情应该可以解决问题：
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');
}
Use it like this:像这样使用它：
imageLoader($('someElementWithAnImageTagInside'));
Again this is just psuedocode really but hopefully should give you some ideas.同样，这实际上只是伪代码，但希望能给您一些想法。
Hope this helps希望这可以帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.