我目前正在开发一个Web应用程序,它有一个显示单个图表的页面(.png图像).在此页面的另一部分,有一组链接,当单击时,整个页面重新加载并看起来与之前完全相同,除了页面中间的图表.
我想要做的是当在页面上单击链接时,只更改页面上的图表.这将大大加快速度,因为页面大约100kb大,并且真的不想重新加载整个页面只是为了显示它.
我一直在通过JavaScript工作,到目前为止,使用以下代码
document.getElementById('chart').src = '/charts/10.png';
问题是,当用户点击链接时,图表更改可能需要几秒钟.这使得用户认为他们的点击没有做任何事情,或者系统响应缓慢.
我想要发生的是显示一个微调/ throbber /状态指示器,代替图像在加载时的位置,所以当用户点击链接时他们知道至少系统已经接受了他们的输入并正在做一些关于它的事情.
我已经尝试了一些建议,即使使用psudo超时来显示微调器,然后再回到图像.
我有一个很好的建议是使用以下内容
<img src="/charts/10.png" lowsrc="/spinner.gif"/>
哪个是理想的,除了微调器显着小于正在显示的图表.
还有其他想法吗？
美好的一天,
我正在研究Ionic应用程序,我正在从JSON提要中动态加载图像.我希望当从外部URL拉入图像时,占位符图像显示在其位置,此后,占位符图像应该在加载后由"真实"图像替换.
我目前的情况的一个例子是:
<ion-card *ngFor="let item of items"...
<img [src]="item.picture" />
感谢和问候.