我有很多图像,但加载它们会减慢页面速度,我需要将第一个图像加载到 100%,然后开始加载下一个,循环重复,直到所有图像都加载完毕。
例如:
<div class="imagenes">
<img src="pequena1.png">
<img src="pequena2.png">
<img src="pequena3.png">
</div>
重要的是下一张图片“仅”在上一张图片 100% 加载后自动加载,这样页面就不会超载。
图像的数量可能会有所不同,因此如果您可以检测到某个图像中<img>
包含的标签,那就太好了。<div>
某种循环,但在加载最后一个图像之前停止。
一个简单的解决方案是逐个加载图像,而不是使用 su
src
而是使用数据属性,并且src
仅在加载前一个图像时才替换图像中的一个(为此使用图像事件)。onLoad
为此,您可以使用一个简单的函数来读取图像,将它们保存在列表中并按顺序加载它们。像这样的东西:
为了避免空图像出现问题,如果您将
src
图像设置为透明像素或其他东西会很好。这样您就不会对服务器进行任何不必要的调用或可能的 404 问题。在这里你可以看到一个工作演示:
相同的代码转换为 jQuery 迷你插件(如评论中所述):
我不知道这是不是你的想法。这个想法是,您现在可以
cargaImagenesUnaAlTiempo
通过选择要应用的元素从 jQuery 调用该函数。例如,如果您希望图像#div-con-imagenes
一张一张地加载,那么您可以使用$("#div-con-imagenes").cargaImagenesUnaAlTiempo()
.您可以使用延迟加载插件,根据页面滚动的方式,加载不同的图像,这样您就可以避免页面对用户的速度变慢。
演示