반응형
Angular의 ng-src에 대한 이미지 로드 이벤트JS
제 이미지는 다음과 같습니다.<img ng-src="dynamically inserted url"/>
하나의 이미지가 로드되면 iScroll refresh() 메서드를 적용하여 이미지를 스크롤할 수 있도록 해야 합니다.
콜백을 실행하기 위해 이미지가 완전히 로드되었을 때 알 수 있는 가장 좋은 방법은 무엇입니까?
다음으로 이미지 onload 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 />
커스텀이 되도록 조금 수정했습니다.$scope
메서드는 다음과 같이 호출할 수 있습니다.
<img ng-src="{{src}}" imageonload="doThis()" />
지시사항은 다음과 같습니다.
.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
//call the function that was passed
scope.$apply(attrs.imageonload);
});
}
};
})
누군가 그것이 매우 유용하다고 생각하길 바란다.감사합니다 @mikach
그doThis()
그러면 함수는 $dispony 메서드가 됩니다.
@ Oleg Tikhonov : 이전 코드를 갱신했습니다.@ mikach 고마워..)
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');
});
}
};
});
답변:
var img = new Image();
var imgUrl = "path_to_image.jpg";
img.src = imgUrl;
img.onload = function () {
$scope.pic = img.src;
}
이전 코드를 업데이트했습니다.
<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction">
그리고 지시...
.directive('imageonload', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
scope.$apply(attrs.imageonload)(true);
});
element.bind('error', function(){
scope.$apply(attrs.imageonload)(false);
});
}
};
})
기본적으로 이것이 제가 사용하게 된 해결책입니다.
$syslog()는 적절한 상황에서 외부 소스에서만 사용해야 합니다.
적용하지 않고 콜스택의 끝에 스코프 갱신을 송신했습니다.'scope'만큼 잘 작동합니다.$syslog(attrs.imageonload)(true);.
window.app.directive("onImageload", ["$timeout", function($timeout) {
function timeOut(value, scope) {
$timeout(function() {
scope.imageLoaded = value;
});
}
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('load', function() {
timeOut(true, scope);
}).bind('error', function() {
timeOut(false, scope);
});
}
};
}]);
언급URL : https://stackoverflow.com/questions/17884399/image-loaded-event-in-for-ng-src-in-angularjs
반응형
'prosource' 카테고리의 다른 글
Ajax를 사용하여 데이터 테이블에서 모든 행을 내보내려면 어떻게 해야 합니까? (0) | 2023.03.14 |
---|---|
jq를 사용하여 2개의 파일에서 2개의 JSON 개체를 병합하려면 어떻게 해야 합니까? (0) | 2023.03.14 |
Polylang에서 언어 전환기를 드롭다운으로 표시하는 방법 (0) | 2023.03.14 |
FormData 중첩된 개체 추가 (0) | 2023.03.14 |
사용자 로그아웃 symfony2를 강제 실행하는 방법 (0) | 2023.03.14 |