如何隐藏页面内容，直到所有图像完全加载？ [英] How can I hide a page contents until all the images are fully loaded?

问题描述

我正在尝试优化一个加载非常严重的网站。我已经重新排序，压缩并缩小了js和css，但最大的问题是图像。这个网站有一些非常沉重的图像，所以当它开始加载内容跳转，而所有的图像正在加载。

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

据我所知，这可能不是一个好的做法，但我认为在显示内容前需要花费两秒钟的时间才能更好地完成这个任务，并且在这两秒钟内它会变得不可思议。

1。）这在技术上有可能吗？怎么样？ （我想知道这一点，即使它不是一个好习惯）

<2>）如果这不是一个好习惯，你会如何避免这个问题？ / p>

解决方案

使用 JQuery 。我推荐使用这个框架，即使它不是这个特定的解决方案：

 函数预加载（arrayOfImages）{ 
 $（arrayOfImages）.each（function（）{
 $（'< img />'）[0] .src = this; 
}）; 
 
 $ / code> 

像这样使用它：

  preload（[
'img / apple.jpg'，
'img / banana.jpg'，
'img / pear.jpg '
]）; 
  

使用CSS和JQuery轻松隐藏您的网站：





CSS：

  body {
 display：none; 
} 
  

JQuery：

<$ $（$ body'）。show（）;
//或将其淡入：$（'body'）。fadeIn （）;
}）;


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. 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.

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? 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?

解决方案

It's extremely easy with 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:

body {
    display:none;
}

JQuery:

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

这篇关于如何隐藏页面内容，直到所有图像完全加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！