Ng-lazyload-image: 默认图像不可见

你好，

示例页面使用了以下 css 样式：

img {
  opacity: 0;
}
img.ng2-lazyloaded {
  opacity: 1;
}

例如，它旨在隐藏图像（和默认图像），直到加载延迟加载的图像。

但是，如果您删除opacity: 0;您应该能够在加载延迟加载图像之前看到默认图像。

我已经用更多示例更新了示例页面。 转到http://tjoskar.github.io/ng2-lazyload-image/并单击“默认图像”以查看使用默认图像的示例。
如果您使用的是 chrome，您还可以使用开发工具中的“网络节流”来模拟更长的加载时间。

我回答你的问题了吗？

你在这里有示例代码： https :

@tjoskar我已经尝试了所有方法，仍然无法正常工作，根本没有显示默认图像，并且路径是正确的，因为如果我用默认图像替换了lazyloder 图像并加载了默认图像，问题是当我检查谷歌浏览器检查器工具，我看到默认图像没有附加到图像的 src 属性，而是默认附加了lazyloader图像。 请问有没有其他办法解决这个问题？ 等待您的答复。

谢谢

@kelvinrolex ，我不确定我是否遵循。 如果应该延迟加载的图像已经在浏览器缓存中，则默认图像将永远不可见。 算法如下：

1. 将默认图像设置为src
2. 检查图像是否在视口中

2.1 如果图像在视口中，则开始下载延迟加载的图像
2.1.1 下载lazyloaded镜像时，设置lazyloaded镜像为src
2.2 否则转到 2

我录制了一段视频来展示默认图像是如何加载的： https :

您是否有可以共享的代码片段，以便我可以更好地了解您要执行的操作。

谢谢

看起来我有同样的问题。 如果我使用 [src]="defaultImage" （当然还有一个 defaultImage 属性），img 标签的 src 属性不会在图像加载（进入视口）之前写入。

如果我不使用属性绑定（例如：

@taseroth ，抱歉回复晚了。 您使用的是什么浏览器和操作系统？ 我无法在 macOS 上的 Chrome/Firefox/Safari 中重现这一点。
只是要清楚; 如果您访问http://tjoskar.github.io/ng2-lazyload-image/fade-in-image然后按链接“默认图像”。 那你没看到尼古拉斯凯奇的照片吗？

我有同样的问题。 默认图像是点头渲染的（仅当我用“src”和硬编码的占位符 url 明确地放置它时）。
我也注意到“scrollspy”不能正常工作，有时 lasyload 加载前 2 或 3 个元素 &
即使在“强烈”滚动 XD 之后，所有其他人也会保持不变。 偏移参数似乎不会影响这个问题。 有一个技巧：如果我重新加载页面并在加载容器之前向下滚动，它会加载所有图像......
控制台或编译期间没有错误。

@bsh314 ，我不关注。

默认图像是点头渲染的（仅当我用“src”和硬编码的占位符 url 明确地放置它时）。

您应该使用src作为默认图像。
假设您正在使用以下代码： <img [src]="defaultImage" [lazyLoad]="image"> 。 Angular 将编译它并将<img src="default-image.jpg">给浏览器（给定defaultImage = 'default-image.jpg' ），当图像在视口中时，指令 (ng2-lazyload) 将图像节点更新为<img src="lazyload-image.jpg"> （给定image = 'lazyload-image.jpg' ）。

我也注意到“scrollspy”不能正常工作......

你是指bootstraps scrollspy吗？ 你能在没有 scrollspy 的情况下重现错误吗？

@tjoskar不，我不是 8using bootstrap，那只是命名该类型功能的方式。
我的默认图像问题：
<img src="default-image.jpg" [lazyLoad]="image"> -> 这有效
<img [src]="defaultImage" [lazyLoad]="image"> -> 这不起作用
谢谢回复！

我也有同样的问题。 仅当 img url 在模板中硬编码时才有效。
您在示例中对其进行了硬编码：

// https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts
<img
        *ngFor="let image of images"
        src="https://www.placecage.com/1000/1000"
        [errorImage]="errorImage"
        [lazyLoad]="image">

编辑：如果 AOT 可以为您将 url 硬编码到模板中，也许它也有效。 就我而言，我从之前的 API 调用中获得了默认图像 url，因此它是动态的。 我的目标是使用默认图像作为低质量预览并延迟加载更高质量的图像来替换它。

@filipsuk ：是的，这似乎是问题所在。 我不敢相信我错过了那个细节。

此问题应在2.3.2版中解决。 请试一试。

@tjoskar问题似乎在 2.3.2 中得到解决。 非常感谢你的工作！ :)

我现在要关闭这个。 请让我知道你们中的任何人仍然有问题。