对于使用JavaScript的用户，懒负载内容的更好方法是什么？

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

题

我有一个页面上有很多图像和其他代码，如果懒惰加载，它可以更好地工作。

我一直在尝试使用NoScript标签执行此操作，但我只是注意到它在IE中无法正常工作。它可以在我测试过的所有其他浏览器（FF，Opera，Chrome，Safari等）中工作，因此我有些沮丧。

我很确定在某一或另一个时刻，我实际上在IE中工作了，因为我已经使用了一段时间了，并且我经常测试IE ...但是现在不起作用，我Google似乎建议的一切都建议它从来没有起作用。

这是一个要复制和粘贴的简单示例，显示我正在尝试的内容：

<!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>

用于使用JavaScript的用户和没有JavaScript的用户使用的HTML是相同的。我只是使用jQuery标记内容，以使其更易于查看。由于该内容以JavaScript为单位，因此在打开选项卡时需要懒负载，因此当页面具有相当大的附件时，最初不需要年龄才能下载。

如何在不输出HTML多次输出的情况下实现这一目标？

有帮助吗？

解决方案

您需要做的是将所有图像指向Pixel GIF（或PNG）。编写一个脚本，该脚本检查用户是否在图像附近滚动，然后使用JavaScript与完整图像交换像素。

在我编写的脚本中，您将拥有一个看起来像：

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

或者，您可以使用 这样的插件. 。注意：我以前从未使用过此插件，但是看起来您需要的只是您所需要的。

如果您真的想获得铁杆，则可以使用h之类的东西懒惰javascriptead.js 或者 control.js

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top