Question

我有这样的事情：

<div>
    <img src="bigimage_1.jpg" />
    <img src="bigimage_2.jpg" />
    <img src="bigimage_3.jpg" />
    ...
    <img src="bigimage_n.jpg" />
</div>

只有在视口的宽度大于300px时才应显示div。

由于图像非常大，我不希望在宽度低于300px时下载它们。但是当宽度大于300px时，我需要尽快开始下载它们。

此外，这应该适用于很多设备上的很多浏览器，所以我想让它尽可能健壮。

我在考虑使用https://github.com/sebarmeli/JAIL并在$（document）.ready上调用jail函数，但我不知道是否有更好的解决方案。
有什么建议吗？

Answer 1

我建议您查看Scott Jehl's picturefill解决方案。在实现使用noscript标记提供回退映像的no-js解决方案方面，它采用了与JAIL类似的方法，但它避免了对占位符.gif的初始http请求。

Answer 2

您可以尝试使用CSS @media（min-width：300px）{...}

Answer 3

放置$(document).ready函数，使用条件语句测试视口（或图像可用的渲染区域，计算正文和其他元素的边距，填充等）宽度，并调用如果它通过了jail函数。

您可以将宽度为贪婪的零高度（带有css）放置在应该加载图像的空元素中，并通过jquery选择它来测试它可以获得多少宽度。如果宽度大于300，请调用JAIL。

HTML图像有条件下载

3 个答案: