HTML图像条件下载

我有这样的事情：HTML图像条件下载

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

股利只能显示，如果视口的宽度大于300像素。

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

此外，这应该在很多浏览器上工作了很多设备，所以我想让它尽可能稳定。

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

来源

2012-11-29 pomber

我不确定你要求什么建议。您是否正在征求基于视口宽度的条件加载图像的解决方案？您是否要求我们审核您提议的解决方案？ – kinakuta

基于某些条件征求图像的条件下载解决方案 – pomber

不下载它的唯一方法是不要将其包含在dom中，除非您希望它下载。从dom中删除元素不会阻止浏览器下载它。 –

您可以尝试使用CSS @media（最小宽度：300像素）{...}

来源

2012-11-29 20:05:45

媒体查询不能有效地加载图像 - 他们只适用于指定不同的背景图片 – kinakuta

把一个$(document).ready功能，测试视（或使可用面积的图像，约占人体和其他元素的保证金，填充等）的宽度与条件语句，并调用监狱功能，如果它通过。

你可以放置一个宽度贪婪零高度（用CSS）空元素，其中的图片都应该被加载，并测试多少宽度它可以通过jQuery选择他得到。如果宽度大于300，请致电JAIL。

来源

2012-11-29 20:14:19 Mindwin

我建议考虑看看Scott Jehl's picturefill解决方案。对于使用noscript标签实现no-js解决方案来提供后备映像，它采用了与JAIL稍微类似的方法，但它避免了对占位符.gif所做的初始http请求。

来源

2012-11-29 20:37:11 kinakuta

Picturefill非常酷。如果您需要为图片加载事件，您也可以尝试我的jquery.pikshur插件：https：//github.com/geekytime/jquery.pikshur –

HTML图像条件下载

回答

相关问题