【问题标题】:lazyload.js requiring action to display images on initial loadlazyload.js 需要在初始加载时显示图像的操作
【发布时间】:2016-06-27 20:01:22
【问题描述】:

我正在使用lazyload.js 库来延迟加载动态加载到无限滚动视图中的图像。在我开始滚动并加载下一页结果后,延迟加载工作得很好。

在初始加载时,图像不会延迟加载,直到窗口中发生某些操作,例如轻微滚动、单击容器中的可点击元素等。如果我在调用 $('.lazy').lazyload() 时设置了一个计时器,它工作得很好,但我不想这样做(这很hacky)。

在初始加载后,如果我从 javascript 控制台运行 $(window).resize(),图像加载得很好,但即使我在初始加载后在代码中执行此操作,它也不起作用。

有没有办法在初始加载时强制图像延迟加载?

请注意,图像是在通过 AJAX 调用加载初始页面后放置到页面上的。

【问题讨论】:

    标签: javascript jquery single-page-application lazy-loading


    【解决方案1】:

    我个人不是lazyload.js 的粉丝(性能糟糕),但它实际上应该是开箱即用的。加载应在文档准备好时触发。

    鉴于resize 似乎也不起作用,您能否验证这些事件确实触发了?也许您的 HTML 有问题(文档类型,或天知道是什么)。

    【讨论】:

    • 相对于lazyload.js,你有什么推荐的吗?
    • 我有偏见,我用 jQuery.isInView 实现延迟加载,因为我已经写了这个东西。另一个竞争者是 jquery.visible,它在速度方面是(咳嗽)第二好的。我在这里测试了一堆组件:output.jsbin.com/lisudi/3。也许这可以帮助您根据页面上延迟加载项目的数量选择适合您的项目。为了平滑滚动,您必须在 16 毫秒内完成工作(在您计划支持的最慢平台上)。
    • 所以我刚刚实现了 isInView 仍然是同样的问题!我必须做一个轻微的滚动才能显示任何内容。我开始认为这是我做错了,哈哈。我不明白。
    • 实际上@hashchange 这似乎只是在某些时候是一个问题......当这个模块加载时,我通过单页应用程序上的 AJAX 调用动态地将我的图像加载到容器中,你呢?有什么推荐的方法来调用我的lazyLoadImages 方法(其中包含 isInView 代码)直到图像被加载,或者类似的效果?
    • 如果没有看到代码,真的不能给你建议。但是如果你能想出一个简单的、最小的演示并发布在 JS Bin 或类似的东西上,我会试一试(简单地说,恐怕没有广泛的调试)。
    猜你喜欢
    • 1970-01-01
    • 2019-09-12
    • 1970-01-01
    • 2016-02-14
    • 1970-01-01
    • 2012-10-26
    • 2013-11-30
    • 1970-01-01
    • 2013-07-21
    相关资源
    最近更新 更多