如何从AJAX调用顺序加载图像[Web Development]？
我有一个显示房屋的房地产应用程序。
我使用AJAX来填充具有家庭列表的固定高度/宽度DIV“窗口”。
很多时候，DIV窗口可以填充1000个左右的房产列表。
每个房产列表包括一张房产图片，每栋房屋的高度约为100px（每排“100”高）。
由于我的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我实际上不会使用那个插件，因为它似乎缺少回调，在它的文档中有一个奇怪的遗漏：
你可以解决这个问题
但肯定有一些东西要从中学习:)
假设您以类似的方式接收到HTML片段，我认为您可以删除所有的src属性，然后像以前的图像一样将它们逐个添加回来，如下所示：
$.ajax({
source: 'somewhere/over/the/rainbow',
// ... other options
success: function(data){
var images = $('body').find('img').each(function(){
$.data(this, 'source', this.src);
this.src = '';
});
images.appendTo('body');
seqLoad(images.children('img:first'));
seqLoad(images.children('img:eq(2)'));
}
});
seqLoad()是一个像这样的函数：
function seqLoad(element){
element.attr('src', $.data(element, 'source'));
element.load(function(){
seqLoad(element.next().next());
});
}
基本上这个想法是抓住每个img的src ，存储它，然后在加载时将它们逐个添加回img标签。 当然，这有几个问题，比如说如果其中一个从不加载（如果加载时间太长，这可以通过超时“跳过”所述图像来解决）。 开始两个实例，因为就我所知，大多数浏览器一次只能从同一个域加载两个实例。
只是不要去把这些代码插入你的网站......我没有时间去建立一个适当的测试环境，所以这个东西可能充满了bug。 采取这个想法，并去写你自己的。 欢迎任何有关改进的建议。
似乎与这篇文章类似：JavaScript：惰性加载图像水平Div？
你见过这个网页：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/
它显示了一个jQuery插件来完成它http://www.appelsiini.net/projects/lazyload
链接地址: http://www.djcxy.com/p/87119.html上一篇: How to sequentially load images from an AJAX call [Web Development]?