Ленивая загрузка с обычным DOM внутри указанного класса? - PullRequest
Новая
       1

Ленивая загрузка с обычным DOM внутри указанного класса?

2 голосов
/ 29 января 2012

Я хотел бы использовать ленивую загрузку изображений (например, http://www.appelsiini.net/projects/lazyload).

Проблема в том, что я хочу интегрировать без перезаписи тегов img с src = "1px.gif" data-оригинал = "foo1.jpg".Вместо этого я хотел бы просто добавить изображения, которые я использовал (например, в CMS и т. Д.), Внутри определенного класса, например, 

<div class="lazyLoad">
  <img src="foo1.jpg" width="800px" height="600px" alt="foo1" />
  <img src="foo2.jpg" width="800px" height="600px" alt="foo2" />
</div>

включит его при загрузке страницы в 

<div class="lazyLoad">
  <img src="1px.gif" data-original="foo1.jpg" width="800px" height="600px" alt="foo1" />
  <img src="1px.gif" data-original="foo2.jpg" width="800px" height="600px" alt="foo2" />
</div>

, что в таком случае будет магией ленивой загрузки.

Кто-нибудь знает решение для этого?

1 Ответ

0 голосов
/ 29 января 2012

Конечно, если вы также управляете тем, как CMS предоставляет информацию во фронт-офис, вы можете просто заменить местозаполнители que для следующих переменных.

Если вы не можете сделать это на стороне сервера (php / asp / etc), и вы можете вставить в него некоторый javascript, который вы можете использовать jQuery, сразу после загрузки DOM, но не для изображений, сделайте это самостоятельно .Это не будет так элегантно, как первое решение (потому что ваш браузер, вероятно, предварительно загрузит некоторые изображения), но в целом оно будет работать. 

// jQuery example
$(".lazyLoad img").each(function(index) {               // selects all img within lazyLoad
   $(this).attr('data-original', $(this).attr('src'));  // inserts a new attribute with the original src
   $(this).attr('src', "1px.gif");                      // put src as the 1px.gif
});

Вы можете увидеть реализациюэто в jsFiddle.
(нажмите на панель результаты , чтобы загрузить изображения)

Это подтверждение концепции.Я настоятельно рекомендую вам сделать это на стороне сервера!

...