我希望能够阻止具有ng-src属性的图像加载,直到它在视口中可见。
Angular有可能吗?
以前我使用过jQuery LazyLoad Plugin,但是我试图这样做而不必同时使用Angular和jQuery。
答案 0 :(得分:5)
如果您仍然感兴趣,我在github上发现了这个回购: https://github.com/afklm/ng-lazy-image
我试了一下它就摇滚了!
图像仅在出现在视口中时加载,您可以根据屏幕大小选择要加载的图像。这意味着您可以为移动用户加载较小的图像;)
答案 1 :(得分:5)
在angularjs中,可以使用指令实现延迟加载。
步骤:
步骤1.创建指令如下:
App.directive('lazyLoad', lazyLoad)
function lazyLoad() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
const observer = new IntersectionObserver(loadImg);
const img = angular.element(element)[0];
observer.observe(img)
function loadImg(changes) {
changes.forEach(change => {
if (change.intersectionRatio > 0 && change.target.getAttribute('tempData')) {
change.target.src = change.target.getAttribute('tempData');
}
});
}
};
};
};
步骤2:在标签中使用lazy-load属性并替换" ng-src"使用tempData 例如。在html中
<img ng-repeate="obj in objects" lazy-load tempData="obj.srcURL">
注意:我们不是直接分配src,因为我们希望阻止图像向服务器发送加载图像的请求。
重要说明:依赖于es-6。在进行构建时,您可能会收到解析错误。
*解决方案:npm install --save gulp-uglify-es
安装命令后需要更新gulp文件。 这将安装依赖项,您的代码现在可以进行构建。
这就是全部!!!
感谢您阅读!!!
答案 2 :(得分:0)
我认为你可以将源绑定到一个getter,它只返回值,如果元素是可见的(假设你使用某种类型的绑定来触发img的可见性)。
例如,在控制器中使用ng-src="{{getImgSource()}}"
:
scope.getImgSource = function(){
if(scope.showImg){
return "myImageUrl.png";
}
return "";
};
但是,如果这是你必须经常使用的东西,也许你应该考虑创建自己的指令来做到这一点。