使用 javascript 为用户延迟加载内容的更好方法是什么？答案

【问题标题】：What is a better way to lazy load content for users with javascript?使用 javascript 为用户延迟加载内容的更好方法是什么？
【发布时间】：2011-01-24 20:45:24
【问题描述】：

我有一个包含大量图像和其他代码的页面，如果延迟加载会更好。

我一直在尝试使用 noscript 标记来执行此操作，但我只是注意到它在 IE 中无法正常工作。它适用于我测试过的所有其他浏览器（ff、opera、chrome、safari 等），所以我有点沮丧。

我很确定在某一时刻我实际上已经在 IE 中工作过，因为我已经使用该技术有一段时间了，而且我经常测试 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>

使用 javascript 和没有 javascript 的用户使用的 html 是相同的。我只是使用 jquery 来标记内容以使其更易于查看。由于内容在 javascript 中以标签形式显示，因此在打开标签时需要延迟加载，因此当页面具有相当大的附件时，最初下载不会花费很长时间。

如何在不多次输出 html 的情况下实现这一点？

【问题讨论】：

如果启用脚本，IE 似乎不会向 dom 添加 noscript 标签。见：tjs.co.uk/blog/…

标签： javascript jquery html graceful-degradation noscript

【解决方案1】：

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

在我编写的脚本中，您将有一个看起来像这样的图像标签：

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

或者，您可以使用plugin like this。注意：我以前没有使用过这个插件，但它看起来就是你所需要的。

如果你真的想要硬核，你可以使用类似 head.js 或 control.js 的东西来延迟加载你的 javascript

【讨论】：

我刚刚更新了问题以证明内容不仅仅是图像。我正在使用 javascript 将内容分解为用户可以单击以查看内容部分的选项卡。我不认为在这种情况下使用 1px 图像是一个好主意，因为如果用户没有 javascript，我希望他们仍然能够看到所有内容，只是页面会很长并且需要更长的时间来下载。跨度>
那么在这种情况下，您应该发出 ajax 请求来获取选项卡的内容。与其使用 noscript，不如在没有 javascript 的情况下让内容看起来不错，然后让 javascript 在包含元素上放置一个类，使其具有制表符的样式？
嗯，这基本上就是我正在做的事情。用于 javascript 和 noscript 的 html 是相同的，只是 css 样式不同。使用 noscript 标记允许我在使用 javascript 打开选项卡之前浏览器不呈现任何内容（获取图像、运行 flash 等）的情况下进行延迟加载。由于 html 已经可用，我真的希望避免在服务器端使用 ajax 请求将其写出两次。有没有办法绕过为使用 javascript 的用户多次生成页面？我喜欢将所有内容的 http 请求减少到一个。
您根本不应该为此使用 noscript。让内容在没有 JS 的情况下可用，然后使用 JS 来增强体验（正是您想要做的）。通过这样做，您将不必重写任何内容。