Динамическое добавление большого количества изображений на страницу, загрузка в фоновом режиме - PullRequest
Новая
       11

Динамическое добавление большого количества изображений на страницу, загрузка в фоновом режиме

1 голос
/ 13 июля 2010

Я динамически добавляю относительно большое количество маленьких изображений на страницу.Я делаю запрос XMLHTTP, который возвращает некоторые данные JSON формы 

{images:[
  {url:'/image?id=1',
  width:32,
  height:32,
  label:"Foo"},
  {url:'/image?id=2',
  width:32,
  height:32,
  label:"Bar"},
  ....
]}

, затем я создаю некоторый HTML-код формы 

<ul>
  <li><img src="/image?id=1" width="32" height="32"> Foo</li>
  <li><img src="/image?id=2" width="32" height="32"> Bar</li>
  ...
</ul>

и добавляю это содержимое на страницу, используя innerHTML property.

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

У меня сложилось впечатление, что если я укажу атрибуты ширины / высоты для тега img, то яполучит такие заполнители "бесплатно", без необходимости прибегать к сложному волшебству DHTML / javascript, но, похоже, это не сработает.Что-то мне не хватает?

Ответы [ 2 ]

1 голос
/ 13 июля 2010

Странно, что они не загружаются асинхронно. Может быть, вы могли бы попытаться создать HTML с использованием функций DOM вместо использования innerHTML. Например (не проверено): 

var ul = document.createElement("ul");
var li = document.createElement("li");
var img = document.createElement("img");
var textNode = document.createTextNode("Foo");

img.src = "/image?id=1";
img.width = 32;
img.height = 32

li.appendChild(img);
li.appendChild(textNode);    
ul.appendChild(li);

document.body.appendChild(ul);

В прошлом я делал подобные вещи с изображениями, и они всегда работали, как и ожидалось.

Вам нужно было бы использовать цикл для добавления каждого изображения из JSON, но вы поняли идею.

0 голосов
/ 25 апреля 2012

Я не знаю, что именно произошло в вашем приложении, я думаю, что вы можете использовать событие onload в javascript для выполнения этой работы, например: 

<img src="example.png" onload="loadImage;" />
....
function loadImage ()
{
    // here to load the next image, and insert it into DOM
}
...