med*_*iev 2 javascript jquery lazy-loading
我基本上有一个预订引擎单位结果页面,必须显示40个单位,每个单位有1个大图像的第一个缩略图和X个随附的缩略图图像.
我一直在使用jquery延迟加载插件,但它不够彻底(我在DOM Ready上调用它),加上它在IE中不起作用(50%的客户端使用IE因此这是一个大问题) .
我认为我真正需要做的并不是真正吐出图像而是伪造的元素,例如跨度,并且可能修改我的代码,这样如果用户查看跨度,则将其渲染为图像元素.
<span src="/images/foo.gif">
预订引擎依赖于JS,所以我想我可能只是依赖于ajaxifying所有缩略图并在窗口滚动等上有事件处理程序,以使页面"可用"并平均加载(2-3在高速DSL /电缆上使用秒而不是5到30秒.
我很欣赏任何例子或想法.
相关链接/发现可能有助于解决此问题:
#1:http://github.com/silentmatt/jquery_lazyload
jquery延迟加载的一个分支似乎解决了IE加载并增加了对容器的支持.
#2:youtube.com将一些视频的src设置为1x1透明gif,并在大约前10个结果之后设置延迟加载.
更新
#1:我们决定创建一个脚本来生成缩略图并对它们进行递归生成.我实现了它们.570个缩略图图像中的每一个都是60-120KB,而现在它们只有2 KB.由于570个并发请求,加载速度稍快但仍然很慢,即使延迟加载器插件到位,我也不确定它是否足够快地应用(即使在图像完全加载之前就准备好了DOM).虽然取得了一些进展.
我想在前10个单元之后生成1x1像素的GIF并且只是延迟加载它们.仍然需要研究一种技术.
Web浏览器非常聪明地有效地呈现页面,所以试试这个:
确保在HTML中发送图像的像素大小,以便即使未加载图像,浏览器也可以呈现整个页面.
立即(在服务器上)填写最重要图像的URL,以便浏览器尽快加载图像.对于所有其他图像,请使用占位符,其中显示"图像正在加载..."或类似的内容.
在页面加载时,将占位符替换为背景中的真实图像(加载2-3张图像,然后使用计时器等待再次运行,例如50ms).
您可以通过查询浏览器窗口的大小来进一步优化步骤#3,然后询问图像的位置,只有在可见时才加载它们.