Как лучше для Lazy Lool Content для пользователей с JavaScript?

StackOverflow https://stackoverflow.com/questions/4786985

Вопрос

У меня есть страница, на которой много изображений и другого кода, которые будут работать лучше, если бы она была загружена.

Я пытался сделать это с тегом Noscript, но я просто заметил, что он не работает правильно в IE. Он работает в любом другом браузере, который я протестировал (FF, Opera, Chrome, Safari и т. Д.), Поэтому я немного разочарован.

Я уверен, что в тот или иной момент у меня действительно работало это, потому что я некоторое время использовал эту технику и довольно часто тестирую IE ... но сейчас это не работает, и все, что я, кажется, предлагаю что это никогда не сработало.

Вот простой пример копирования и вставки, который показывает, что я пытался:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

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

Как я могу достичь этого, не выводя HTML более одного раза?

Это было полезно?

Решение

Что вам нужно сделать, так это иметь все изображения указывают на Pixel GIF (или PNG). Напишите сценарий, который проверяет, прокрутил ли пользователь рядом с изображением, а затем используйте JavaScript, чтобы обмениваться Pixel с полным изображением.

В сценариях, которые я написал, у вас будет тег изображения, который выглядит как:

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

Поочередно, вы можете использовать плагин как этот. Анкет Примечание: я раньше не использовал этот плагин, но, похоже, это все, что вам нужно.

Если вы действительно хотите получить хардкор, вы можете лениво загрузить свой JavaScript, используя что -то вроде Head.js или же Control.js

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top