css - 由于背景图像，页面太慢

Question

我在一个网站上使用 CSS3 全屏图库（无 JavaScript）。图库基本上是一个无序列表，其中每个列表项都是一个全屏背景。

它通过在 CSS 文件中为每个列表项设置背景图像来工作。目前画廊拥有 48 张图像，页面加载时间过长。

第一个视图大约是 35 秒。似乎浏览器首先加载了每个 DOM 元素，并且花费了太多时间。

有没有办法在页面加载时不加载某些列表项元素，但仅在页面加载后才使它们可见？

该网站可以在http://www.steveezell.com看到

Answer 1

如果您在 HTML 源代码中声明图像，它将始终在页面加载期间加载。我认为最好的选择是从 JavaScript 更改图像源。

ps：页面不错

Answer 2

您可以在页面完全加载后简单地使用 AJAX 调用：

// Load the script when the page has fully loaded:

$(window).load( function() {
$.getScript(‘your_3rd_party-script.js’);
});

RetrieveImages.js：

// Load here all the images (You might consider showing the first image 
// or images with the regular page loading  to show a first indication to the user 
// and avoid waiting for the page to finish load before showing something).

document.getElementById("myImg").src = "http://www.example.com/image?id=1";  

您可能应该使用 jQuery 分组按类加载所有图像$(".className")。

您使用的服务器端代码是什么？我建议启用 gzip 压缩，这应该会显着减小图像大小。