相关疑难解决方法(0)

加载iframe页面内容时显示加载gif

我搜索并尝试了各种解决方案,以达到我想要实现的目标,但无济于事......

我正在一个摄影网站上工作,该网站在iframe中加载了大量图像,这需要花费一些时间来加载.我想在iframe中显示加载gif图像,直到图像加载完毕.

这是有问题的网站,http://www.chriszachary.com/portfolio

我正在使用javascript动画库来允许用户使用鼠标控制图像滚动.在页面完全加载之前,图像不会滚动.为了帮助减少混淆,我认为加载gif图像会更有效率,但我无法将其拉下来.如果您点击任何投资组合类别(婚礼,订婚,肖像),您会发现加载图像的等待时间很长.

如果有人可以让我知道如何在iframe中实现这一点,请告诉我.如果你可以具体说明使用什么代码和在哪里,我是一个新手:|

在此先感谢,期待一个答案:)

html iframe loading gif show

16
推荐指数
1
解决办法
4万
查看次数

如何显示加载器,直到 iframe 内容以 angular 7 完全加载

我正在从 api 获取 iframe URL,我需要在 angular 7 应用程序的 HTML 中从 api 加载 iframe URL。在我得到 url 之前,我向用户展示了一个加载器。到目前为止,这一切都很好。但在那之后,当 iframe 内容加载到 dom 时,需要几秒钟。那一刻我的页面是空白的。我也想在这个间隙展示一个装载机。

如何实现?

urlToOpen: any;

ionViewDidLoad() {
   this.dataProcess();
}

dataProcess() {
  this.canShowLoader = true;
 // @ts-ignore
 this.pusher.getEngageMdData().take(1).timeout(60 * 1000).subscribe(
   data => {
     this.canShowLoader = false;
     this.urlToOpen =  this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
  },
    (error) => {
      // console.log('error occurred', error);
      this.canShowLoader = false;
    },
   () => {
     // console.log('done');
     this.canShowLoader = false;
   }
 );
}


<iframe *ngIf="canShowLoader === false" [src]="urlToOpen" data-tap-disabled="true"></iframe>

<div class="loadingDiv" *ngIf="canShowLoader === true"> …
Run Code Online (Sandbox Code Playgroud)

javascript iframe angular

1
推荐指数
1
解决办法
2512
查看次数

标签 统计

iframe ×2

angular ×1

gif ×1

html ×1

javascript ×1

loading ×1

show ×1