Как последовательно загружать изображения из вызова AJAX [Веб-разработка]? - PullRequest
Новая
       0

Как последовательно загружать изображения из вызова AJAX [Веб-разработка]?

5 голосов
/ 01 сентября 2010

У меня есть приложение для работы с недвижимостью, которое отображает дома.

Я использую AJAX для заполнения "окна" DIV фиксированной высоты / ширины списками домов.

Часто окно DIV можетбыть заполнены буквально 1000 или около того списками домов.

Каждый список домов включает в себя одну фотографию собственности, а каждый список домов имеет высоту около 100 пикселей (каждая «строка» имеет высоту 100 пикселей).

Поскольку высота моего DIV составляет всего 400 пикселей, только 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>

Ответы [ 4 ]

1 голос
/ 01 сентября 2010

Учитывая, что вы получаете фрагмент 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());
  });
}

По сути, идея состоит в том, чтобы захватить src каждого img, сохранить его, а затем добавить его обратно в теги img один за другим при загрузке. Конечно, есть несколько проблем с этим, например, если одна из них никогда не загружается (это можно исправить с помощью тайм-аута, который пропускает изображение, о котором идет речь, если загрузка занимает слишком много времени). Запускаются два экземпляра, потому что, насколько я помню, большинство браузеров могут загружать вещи из одного домена только по два одновременно.

Только не заходите и не вставляйте этот код на свой сайт ... У меня нет времени на настройку надлежащей тестовой среды, так что эта штука, вероятно, изобилует ошибками. Возьмите идею и напишите свою. Любые предложения по улучшению приветствуются.

1 голос
/ 01 сентября 2010

Возможно, просмотрите источник этого для некоторой идеи: http://www.appelsiini.net/projects/lazyload Я бы на самом деле не использовал этот плагин, так как в нем отсутствуют обратные вызовы, в его документации есть странное упущение:

Вы можете обойти это с помощью

Но, безусловно, есть чему поучиться:)

0 голосов
/ 01 сентября 2010

Если вы используете Javascript для загрузки изображений в массив объектов Image, то это должно работать.Если у вас есть метод, который вы можете безопасно использовать для последовательной загрузки изображений в этот массив, то вы можете сохранить текущую позицию массива и отобразить следующие 4 (или сколько угодно) в поле. 

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.

Однако я не советую заставлять пользователей загружать тысячи изображений, когда они могут даже не просматривать их.Попробуйте загрузить следующие четыре последовательности из того места, где вы сейчас находитесь.

0 голосов
/ 01 сентября 2010
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...