当前位置: 首页 > 面试题库 >

AngularJS中ng-src中的图像加载事件

郭志
2023-03-14
问题内容

我有看起来像的图片<img ng-src="dynamically inserted url"/>。加载单个图像时,我需要应用iScroll
refresh()方法以使图像可滚动。

知道何时完全加载映像以运行某些回调的最佳方法是什么?


问题答案:

这是一个如何调用图像加载的示例http://jsfiddle.net/2CsfZ/2/

基本思想是创建一个指令并将其作为属性添加到img标签。

JS:

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
            });
            element.bind('error', function(){
                alert('image could not be loaded');
            });
        }
    };
});

HTML:

 <img ng-src="{{src}}" imageonload />


 类似资料:
  • 问题内容: 使用包含AngularJS 中数据的变量加载图像 我试图找到一种正确的方法,从包含编码图像数据的变量(例如,使用来从画布中拉出)中加载图像源。 起初,我只是这样尝试: 其中图像是作用域变量,其中的变量包含数据。这实际上工作得很好,唯一的问题是我的控制台出现错误。像这样: GET http://www.example.com/%7B%7Bimage.dataURL%7D%7D 404(未

  • 问题内容: 我正在使用yeoman + angular,并尝试了“ yeoman build:minify”。失败是因为任务rev:img重命名了所有图像。之后,动态源(请参阅http://docs.angularjs.org/api/ng.directive:ngSrc)不再起作用。 有人知道解决这个问题的技巧吗?例如,可以避免图像重命名吗? 问题答案: 目前这是一个已知问题,我们将尽快修复。

  • 问题内容: 我一直在寻找一个简单但并非琐碎的问题的答案:仅使用jqLit​​e在Angular中捕获图像事件的正确方法是什么?但是我想要一些指令解决方案。 因此,正如我所说,这对我来说是不可接受的: 因为它在控制器中,而不在指令中。 问题答案: 这是angular内置事件处理指令样式的可重用指令: 触发img load事件时,将在当前作用域中将sb-load属性中的表达式与load事件一起评估,并

  • 问题内容: 我在iframe中使用ng-src时遇到问题。我需要这样做: 结果: 我知道问题是$ sce,它是XSS的保护,并且该链接需要添加到白名单中。因此,当我执行此操作时,它就起作用了。 我在控制器内部定义: 但是我不能那样做,因为我正在使用ng-repeat循环,所以链接是动态生成的。必须从数据库中读取它! 问题答案: 您可以改用过滤器: HTML: 其中,“ yourURL”是ifram

  • 问题内容: 正如解释这里的angularjs指令NG- SRC是用来防止浏览器加载资源(如图像)车把得到解析之前。我当前正在使用以下代码: 使用以下JS: 正在从Web服务检索路径。由于此延迟,浏览器尝试加载,导致404。一旦检索到路径,浏览器就会发出正确的请求并加载图像。 在所有数据准备就绪之前,防止加载任何资源的首选方法是什么? 请参阅jsfiddle以获得说明我的情况的示例。 谢谢, 马丁

  • 我尝试了不同的变体来加载JavaFX中的图像。 两种变体工作。这里的例子: 同一软件包als Main中的图像: img包中但在src文件夹中的图像: 最后一种变体不起作用,我不明白为什么。有人能解释我是谁吗? img-Folder中的图像,src文件夹外部 我什么都试过了。但是,只要图像位于src文件夹之外,我就会得到一个NullPointerException或一个失败的URL 文件夹结构: