延迟加载组件加载

Question

我正在使用 C# 和 MVC5 构建一个新闻网站。我也使用 MsSQL。在这个项目中，我将所有内容都制作为局部视图，当我需要时，我会调用组件并将其放入所需的部分。（将组件绑定到来自 db 等的部分）

现在我差不多完成了，但我遇到了性能问题。其中之一是从 jquery 延迟加载。

我将网页滚动到底部，在主要部分延迟加载有效，但在右侧，有组件（例如，阅读最多的新闻，评论最多的新闻）它们在主要部分滚动结束之前不会延迟加载.主要部分滚动完成后，在右侧，开始出现组件图像。

我该如何解决这个问题？

编辑：我使用； jquery.lazyload.js 和视图 (cshtml) 我将我的 img 标签设为这样；

<img class="lazy" src="/assets/img/lazyload.gif" data-original="blabla.jpg"/>

Answer 1

我查看了来自 Jquery.Lazyload 的文档，发现以下内容：

当滚动页面插件循环后图像不连续时 尽管已卸载图像。循环检查图像是否可见。经过 找到视口外的第一张图像时，默认循环停止。 这是基于以下假设。页面上的图像顺序相同 作为 HTML 代码中的图像顺序。在一些布局假设下 可能是错的。您可以使用failure_limit 控制加载行为 设置。

$("img.lazy").lazyload({
    failure_limit : 10
});

将failure_limit 设置为 10 会导致插件停止搜索图像 在首屏下方找到 10 张图片后加载。如果你有一个时髦的 布局将此数字设置为较高的值。最坏的情况是实际情况 图片数量。

来源：http://www.appelsiini.net/projects/lazyload

---

因此，我假设您的侧边栏是在您的 html 页面底部定义的，因此在您向下滚动之前不会加载。

---

小更新：

文档中有以下提示：由于您没有在 html 或 css 中定义宽度/高度，因此它可能无法在所有浏览器中正常工作。

专业提示！您必须将图像尺寸设置为宽度和高度属性或在 CSS 中。否则插件可能无法正常工作。

来源：http://www.appelsiini.net/projects/lazyload