小编Yur*_*uri的帖子

使用Angular.js预加载图像的最佳方法

Angular的ng-src保留了之前的模型,直到它在内部预加载图像.我在每个页面上为横幅使用不同的图像,当我切换路径时,我改变主视图,保持标题视图不变,只是在我拥有它时更改bannerUrl模型.

这导致在加载新的横幅图像时看到之前的横幅图像.

我很惊讶它还没有指令,但我想在尝试构建之前进行讨论.

我想要做的是我认为自定义属性上有横幅模型.喜欢:

<img preload-src="{{bannerUrl}}" ng-src="{{preloadedUrl}}">
Run Code Online (Sandbox Code Playgroud)

然后$ scope.watch for bannerUrl更改,并且一改变,首先用loader spinner替换ng-src,然后创建temproary img dom元素,从preload-src预加载图像,然后将其分配到preloadUrl.

例如,需要考虑如何为画廊处理多个图像.

有人有任何意见吗?或者有人可以指出我现有的代码?

我已经在github上看到了使用背景图像的现有代码 - 但这对我不起作用,因为我需要动态高度/宽度,因为我的应用程序是响应式的,我不能用背景图像来做.

谢谢

javascript image-preloader angularjs

26
推荐指数
2
解决办法
5万
查看次数

标签 统计

angularjs ×1

image-preloader ×1

javascript ×1