Jim*_*myL 5 javascript ajax jquery
我有一个显示房屋的房地产应用程序.
我使用AJAX填充一个固定的高度/宽度DIV"窗口"与家庭列表.
很多时候,DIV窗口可以填充1000个左右的房屋清单.
每个房屋列表包括一个房产图片,每个房屋列表大约100px高(每个"行"高100px).
由于我的DIV高度仅为400px高,因此在任何给定时间都只能看到4个房屋清单(可能数千个).
如何按照DIV窗口中列出的图像的顺序加载图像.这样,首先下载可见的房屋图像,然后在后台下载所有不可见的图像(不滚动)？
更新:
注意,我没有描述lazy-loading图像.我想要做的是按照我在DIV窗口中列出的顺序加载图像序列,从顶部开始然后再向下工作.这样,可见图像首先被加载但仍然继续下载不可见图像,而用户不必通过滚动来启动下载.
更新2
如果它有帮助,我在下面的伪代码我正在谈论:
<html>
<script>
var allHomesJSON = ajax_call_to_json_web_service('http://example.com/city=nyc");
for (i=0; i<allHomesJSON.length; i++) {
document.getElementByID('all-homes').innerHTML += '<div class="individual-listing"><img src="allHomesJSON[i].img">Price: allHomesJSON[i].price, Sqft: allHomesJSON.sqft[i] ...';
}
</script>
<body>
<div id="all-homes" style="height:400px">
</div>
因此生成的HTML就像:
<html>
<body>
<div id="all-homes" style="height:400px">
<div class="individual-listing"><img src="http://example/x.jpg">Price: $300,000, Sqft: 2000</div>
<div class="individual-listing"><img src="http://example/y.jpg">Price: $200,000, Sqft: 2000</div>
<div class="individual-listing"><img src="http://example/z.jpg">Price: $500,000, Sqft: 2000</div>
<div class="individual-listing"><img src="http://example/a.jpg">Price: $100,000, Sqft: 2000</div>
...
</div>
也许筛选一下这个的来源以获得一些想法：http://www.appelsiini.net/projects/lazyload我实际上不会使用该插件，因为它似乎缺乏回调，在其文档中有一个奇怪的遗漏：
您可以使用以下方法解决此问题
但肯定可以从中学到一些东西:)
| 归档时间： |
|
| 查看次数： |
2089 次 |
| 最近记录： |