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

你可以使用块插件来阻止页面。 Link

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

5 个答案: