什么是更好的方式来为JavaScript用户延迟加载内容？

我有一个页面，有很多图像和其他代码，如果它是惰性加载会更好。什么是更好的方式来为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的HTML和JavaScript的没有是一样的。我只是使用jquery来选择内容以便于查看。由于内容是在JavaScript中标记的，因此当标签打开时需要进行延迟加载，因此当页面具有相当大的附件时，不需要很长时间才能下载。

我怎样才能做到这一点，不输出HTML不止一次？

来源

2011-01-24 user319862

这似乎是IE浏览器不一样，如果启用脚本脚本标记添加到DOM lazyload您的JavaScript。请参阅：http://www.tjs.co.uk/blog/a-tale-of-accessibility-internet-explorer-and-the-noscript-tag.htm – Raynos 2011-01-24 20:52:53

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

在我写剧本，你将有一个形象的标签，看起来像：

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

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

如果你真的想要得到铁杆，你可以使用的东西如H ead.js或control.js

来源

2011-01-24 20:57:06 dawnerd

我刚刚更新了问题以证明内容不是只有图像。我正在使用JavaScript将内容分解为标签，用户可以点击查看内容部分。我不认为使用1px图像对于这种情况是一个好主意，因为如果用户没有javascript，我希望他们仍然能够看到所有内容，只是页面会很长，需要花费更长的时间才能下载。 – user319862 2011-01-24 21:01:49

什么是更好的方式来为JavaScript用户延迟加载内容？

回答

相关问题