2

我有这样的事情：

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

仅当视口的宽度大于 300 像素时才应显示 div。

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

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

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

4

3 回答 3

2

我建议看看Scott Jehl 的图片填充解决方案。在使用 noscript 标签提供后备图像来实现 no-js 解决方案方面，它采用了与 JAIL 有点相似的方法，但它避免了为占位符 .gif 发出的初始 http 请求。

于 2012-11-29T20:37:11.783 回答
0

放置一个$(document).ready函数，使用条件语句测试视口（或可用于图像的渲染区域，考虑主体和其他元素的边距、填充等）宽度，如果通过，则调用 jail 函数。

您可以在应该加载图像的位置放置一个宽度贪心零高度（使用 css）的空元素，并通过 jquery 选择他来测试它可以获得多少宽度。如果其宽度大于 300，请致电 JAIL。

于 2012-11-29T20:14:19.347 回答
0

您可以尝试使用 CSS @media (min-width: 300px) { ... }

于 2012-11-29T20:05:45.527 回答