有很多图片的网站，只加载一些图片

Site with many images, load only some images?

本文关键字：加载 网站      更新时间：2023-09-26

我有一个网站，可以显示服务器中托管的许多图像。在页面中，图像位于最多100个图像中。在一瞬间，只显示一个div（抛出css样式"display"），其他div都显示为none。

我需要一种方法，允许我只加载显示的div的图像，因为当我打开网站时，它会加载所有图像。

当您使用display:none时，图像仍在下载中。但是如果你要在background-image上使用display:none，他们就不会了。另一种方法是制作一个按钮"加载更多…"，并异步请求

的其余图像

您可以隐藏不想在页面加载时显示的图像，尝试在document.ready函数中执行以下代码

$(document).ready(function(){
    $("#img1").hide();
    $("#img2").hide();
    $("#img3").hide();
           .
           .
           .
    $("#img_n").hide();
});

一种方法是制作一个大的图像精灵，上传后让浏览器缓存。

关于CSS精灵的一个很好的解释可以在这里找到：http://www.w3schools.com/css/css_image_sprites.asp

只需在除第一个图像外的所有图像上保留img标记的src=""为空，然后用javascript对其进行修改。您可以使用onload事件来触发设置下一个src属性。

相关文章：