jQuery 无限滚动/延迟加载

发布于 2024-08-19 22:41:55 字数 384 浏览 10 评论 0原文

我目前正在重新设计我的网站，并一直在考虑使用 JavaScript 和 jQuery。这是我到目前为止所拥有的： http://www.tedwinder.co.uk/gallery2/。

我的愿景是将所有照片放在一页上，用户可以滚动浏览，就像现在一样。但是，我了解在一页上放置 50 多个大型图像的局限性和影响，并考虑使用无限滚动和延迟加载，我知道这只会在用户访问图像或单击某个图像时加载图像。 “更多”链接？

所以，我的问题是：这会减少页面加载吗？我到底该如何实现无限滚动/延迟加载，这会有效地工作吗？或者您能想到任何更有效的方法吗？

谢谢，特德

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

少年亿悲伤 2024-08-26 22:41:55

这是一个非常好的 jQuery 插件，可以处理图像延迟加载。

http://www.appelsiini.net/projects/lazyload

首屏下方的图像将不会加载，直到它们会滚动到视图中。

它会减少您网站的带宽，但如果您没有大量流量，则不会产生太大影响。

有关使用此技术的示例，请查看 http://mashable.com/

回复收藏 0 原文

心作怪 2024-08-26 22:41:55

试试这个 jQuery 延迟滚动加载插件
http://code.google.com/p/jquerylazyscrollloading/

回复收藏 0 原文

表情可笑 2024-08-26 22:41:55

您可以尝试我编写的这个 jQuery 插件，它使用 html 注释来延迟加载 html 的任意位，包括图像：

jQuery 延迟加载器博客文章

jQuery 延迟加载器插件页面

这是一个示例：

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

基本上，您可以使用占位符标记和内部 html 注释来包装要延迟加载的内容。当占位符在视口中可见时，它会被注释内的 html 字符串替换。

您可以使用任何标记作为占位符，但我喜欢 pre，因为当里面只有注释时它会呈现为 0 维度。

希望这有帮助！
@MW_柯林斯

You can try this jQuery plugin I wrote that uses html comments to lazy load any arbitrary bits of html, including images:

jQuery Lazy Loader Blog Post

jQuery Lazy Loader Plugin Page

Here's an example:

<pre class=”i-am-lazy” ><!–
    <img src=”some.png” />
 –></pre>

<pre class=”i-am-lazy” ><!–
    <div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

So basically you wrap the content you want to lazy load with a placeholder tag and and inner html comment. When the placeholder becomes visible in the viewport, it is replaced with the html string inside the comment.

You can use any tag for the placeholder but I like pre because it renders as 0 dimension when there's only a comment inside.

Hope this helps!
@MW_Collins

回复收藏 0 原文