1

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

我一直在尝试使用 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 的情况下实现这一点？

4

1 回答 1

0

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

在我编写的脚本中，您将有一个如下所示的图像标签：

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

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

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

于 2011-01-24T20:57:06.027 回答