使用 javascript 为用户延迟加载内容的更好方法是什么？
我有一个页面，其中包含大量图像和其他代码，如果延迟加载，效果会更好。
我一直在尝试使用 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来对内容进行tab，以方便查看。由于内容是用 javascript 选项卡显示的，因此在选项卡打开时需要延迟加载，因此当页面有大量附件时，最初下载不需要很长时间。
如何在不多次输出 html 的情况下实现此目的？
I have a page that has lots of images and other code that would work better if it is lazy loaded.
I have been attempting to do this with the noscript tag but I just noticed that it is not working correctly in IE. It works in every other browser I tested (ff,opera,chrome,safari,etc) so I am a little frustrated.
I am pretty sure at one point or another I actually had this working in IE because I have been using the technique for a little while and I test IE quite frequently... but it isn't working now and everything I google seems to suggest that it never worked.
Here is a simple example to copy and paste that shows what I was attempting:
<!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>
The html used for users with javascript and without javascript is the same. I just use jquery to tab the content to make it easier to view. Since the content is tabbed in javascript it needs to lazy load when a tab opens so it does not take ages to download initially when the page has sizable attachments.
How can I achieve this without outputting the html more than once?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要做的是将所有图像都指向像素 gif（或 png）。编写一个脚本来检查用户是否滚动到图像附近，然后使用 Javascript 将像素与完整图像交换。
在我编写的脚本中，您将拥有一个如下所示的图像标签：
或者，您可以使用 这样的插件。注意：我以前没有使用过这个插件，但看起来它就是你所需要的。
如果你真的想获得核心，你可以使用 head.js 或 control.js
What you need to do is have all the images point to a pixel gif (or png). Write a script that checks if a user has scrolled near an image, and then use Javascript to swap the pixel with the full image.
In scripts I have written, you would have an image tag that looks like:
Alternately, you could use a plugin like this. Note: I have not used this plugin before, but it looks like it's all you need.
If you really wanted to get hardcore, you could lazyload your javascript using something like head.js or control.js