不在视野中时隐藏图像

时间:2012-12-16 21:10:31

标签: jquery html css image animation

我目前正在构建一个单页网站,该网站使用jQuery为滚动设置动画。我有一个使用jQuery Ajax嵌入的Tumblr博客。当博客加载了所有图像时,它会滞后于滚动动画。

作为一种帮助我的方法,我不加载博客,直到scrollTop在某个范围或博客之内,甚至只在用户没有滚动至少半秒时加载(以阻止它触发)滚动浏览元素时)

然而,正如我所说,一旦加载,图像会导致滚动滞后。在不在视图中时隐藏图像(它们已经加载)的最佳方法是什么,只有当用户没有滚过它们时才显示它们?这样,当滚动动画直接移过它们时,它们会保持隐藏状态吗?

2 个答案:

答案 0 :(得分:2)

您只需使用jQuery("#your-image").hide();

即可

但您可能遇到的问题是浏览器缓存泄漏。所以你可以做的是从DOM中删除图像,但是你必须每次用户滚动到它时重新加载它们,你将获得巨大的数据传输。所以我建议只使用jQuery中的hide()函数,但这不会解决缓存问题。

一件好事可能是启动Google Chrome并使用提供的开发者工具。只需按下键盘上的f12,即可查看Timeline。在顶部的第3个标签中(左侧),您可以选择memory,这是非常高的吗?像这样的网站的一个很大的危险是内存溢出。这意味着JavaScript垃圾收集器无法删除所有unused个对象。所以一定要做好。

编辑:我在Smashing Magazine的facebook页面上找到了this文章,您可能会发现这篇文章很有趣。

答案 1 :(得分:0)

也许您可以使用低分辨率或较小的缩放图像来替换当前不可见的图像。然后,一旦scrollTop使它们可见,您可以重新加载这些图像的高分辨率版本。理想情况下,用户应该同时缓存这两个版本,这样他只会看到低分辨率图像半秒钟。