Замените изображения и загрузите после загрузки остальной части документа - PullRequest
Новая
       4

Замените изображения и загрузите после загрузки остальной части документа

0 голосов
/ 04 августа 2011

В нашем приложении мы храним HTML в таблице базы данных и передаем его пользователю в определенный момент, HTML может содержать довольно много изображений (которые могут быть большими по размеру), что я хотел бы do - это предварительный анализ HTML, когда мы извлекаем его из базы данных и заменяем любые теги изображений чем-то, что позволило бы нам загружать изображения после того, как остальные данные будут представлены клиенту.

т. документ возвращается, и один за другим изображения запрашиваются и загружаются клиентом, а не клиентом, ожидающим загрузки всего документа и изображений, прежде чем они что-либо увидят.

Есть ли что-нибудь, что существует в настоящее время, может быть плагин jquery или аналогичный, который предлагает такую ​​функциональность?

Наше приложение представляет собой веб-сайт asp.net 3.5, использующий элементы управления Telerik (который использует jquery)

Ответы [ 3 ]

1 голос
/ 04 августа 2011

Замените ваши атрибуты img src на "#" и добавьте пользовательский атрибут, примерно такой: 

<img src="#" delayed="http://mydomain.com/myimage.png"/ >

Затем добавьте строку javascript, когда ваша страница загружается, что-то подобное (непроверено, но вы поняли): 

$('img').each(function(){
  $(this).attr('src', $(this).attr('delayed'));
});

есть также ленивый плагин загрузки .. http://www.appelsiini.net/projects/lazyload

0 голосов
/ 05 августа 2011

Способ сделать это не на javscript, это использовать теги везде, а затем добавить файл CSS, который установит фоновое изображение для всех тех, которые являются изображениями.Таким образом, нет JS, задержка загрузки. 

<body>
  <div id="image1"></div>
  <div id="image2"></div>
  .
  .
  .
  .
</body>
<link href="image.css" type="text/css"></link>

Внутри CSS вы делаете это: 

#image1 { width: 100px; height: 100px; background: url(image1.jpg) }
#image2 { width: 100px; height: 100px; background: url(image2.jpg) }

Это сделает ленивую загрузку, которую вы ищете.

0 голосов
/ 04 августа 2011

Вы можете сделать что-то вроде этого скажем, что HTML, который вы получаете от вашей базы данных, это div и имеет id main. Теперь, когда вы получите div, проанализируйте его, чтобы заменить каждый тег img на div классом sub. сразу после окончания div main поместите script элемент, подобный этому 

<div id="main">
...
...
</div>
<script type=text/javascript ....>  // or use the src attribute to import a js file
....
...
..
</script>

теперь в элементе script пишите ajax вызовы для запроса изображений и при получении каждого изображения помещайте это изображение в div с классом sub

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

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

...