首页 文章

如何从AJAX调用[Web开发]顺序加载图像？

提问于
浏览 次
5

我有一个显示房屋的房地产应用程序 .

我使用AJAX填充一个固定的高度/宽度DIV“窗口”与家庭列表 .

很多时候，DIV窗口可以填充1000个左右的房屋清单 .

每个房屋列表包括一个房产图片，每个房屋列表大约100px高（每个“行”高100px） .

由于我的DIV高度仅为400px高，因此在任何给定时间都只能看到4个房屋清单（可能数千个） .

问题：

如何按照DIV窗口中列出的图像的顺序加载图像 . 这样，首先下载可见的房屋图像，然后在后台下载所有不可见的图像（不滚动）？

UPDATE ：

注意，我是 not 描述 lazy-loading 的图像 . 我想要做的是按照我在DIV窗口中列出的顺序加载图像序列，从顶部开始然后再向下工作 . 这样，可见图像首先被加载但仍然继续下载不可见图像，而用户不必通过滚动来启动下载 .

UPDATE 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>
javascript jquery ajax

4 回答

  • 0

    也许筛选一下这个想法的来源：http://www.appelsiini.net/projects/lazyload我实际上不会使用该插件，因为它似乎缺乏回调，在其文档中有一个奇怪的遗漏：

    你可以解决这个问题

    但肯定有一些东西需要从中学到:)

    回复于
  • 1

    鉴于您以与此类似的方式接收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());
  });
}

    基本上这个想法是 grab 每个 img 的 src ，存储它，然后在加载时逐个将它添加回 img 标签 . 当然，这有几个问题，比如说如果其中一个从未加载（如果加载时间太长，可以通过超时修复'skips'问题的图像） . 启动了两个实例，因为据我所知，大多数浏览器一次只能从同一个域加载两个实例 .

    只是不要去把你的代码放到你的网站上......我没有时间设置一个合适的测试环境，所以这个东西可能充满了bug . 接受这个想法，然后自己写 . 欢迎任何有关改进的建议 .

    回复于
  • 0

    似乎与这篇文章类似：Javascript: Lazy Load Images In Horizontal Div?

    你看过这个页面：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

    它显示了一个用于执行此操作的jQuery插件http://www.appelsiini.net/projects/lazyload

    回复于
  • 1

    如果您使用Javascript将图像下载到Image对象数组中，那么应该可以使用 . 如果您有一个方法可以安全地使用顺序将图像下载到该阵列中，那么您可以存储阵列的当前位置并在框中显示下一个（或多个） .

    var img_array = new Array
for (i=0;i<num_images;i++) {
    var img = new Image();
    img.src = "image"+i+"jpg";
    img_array[i] = img;
}

    然后，您可以将图像源（使用上面的img.src）加载到图像标记的src属性中 . 此方法用于在很多javascript库中预加载图像 .

    但是，我建议不要强迫用户下载1000张图片，甚至可能无法查看 . 尝试按照当前显示的顺序下载后四个 .

    回复于

相关问题