由于背景图像，页面太慢

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压缩，这会大大减少图像大小。