具有最高 z-index 的 jQuery Lazyload

Question

我需要延迟加载一个没有滚动的全屏网站，基本上所有页面都通过 z-index 堆叠在一起，更改页面只是切换元素的 z-index。但是延迟加载似乎没有看到这一点，页面仍然试图加载所有内容。一些元素具有 display:none，而其他元素具有 visibility: hidden。

我基本上只需要一个脚本来确保加载具有最高 z-index 的元素中的任何内容，但其他所有内容都将暂停，直到它成为具有最高 z-index 的元素。

这是一个 fiddle ，但还没有 js 作为基础，如果有人知道我该怎么做吗？

JSFIDDLE:http://jsfiddle.net/dreamsynk/dbngco7q/

Answer 1

如果您有时间可以轻松地编写一个 jQuery 插件来执行此操作，您可以使用 :in-viewport和 :visible 来过滤图像，您还可以在图像可见之前预加载图像。

使用 data- 属性设置图像 url，并为您的照片最初使用空图像，然后更改所需的属性(src 或 background) 到相应的 data- 属性，它应该加载。