我有一个显示房屋的房地产应用程序。
我使用 AJAX 在固定高度/宽度的 DIV“窗口”中填充主页列表。
很多时候，DIV 窗口可以填充 1,000 左右的房屋 list 。
每个房屋 list 都包含一张特性图片，每个房屋 list 大约 100 像素高(每个“行”高 100 像素)。
由于我的 DIV 高度只有 400 像素高，因此在任何给定时间无需滚动，只有 4 个房屋 list (可能有数千个)可见。
问题:
如何按照我在 DIV 窗口中列出的顺序加载图像。这样，首先下载可见的房屋图像，然后在后台下载所有不可见的图像(不滚动)？
更新:
请注意，我不是描述图像的延迟加载。我想要做的是按照我在 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我实际上不会使用该插件，因为它似乎缺少回调，其文档中有一个奇怪的遗漏:
You can workaround this with
但肯定可以从中学到一些东西:)
关于javascript - 如何从 AJAX 调用 [Web 开发] 顺序加载图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3614021/