什么是延迟加载图像角中最简单的方法 [英] What is the easiest way to delay loading of images in Angular
问题描述
我有一个允许通过通过键盘上的左/右方向键一个大的文本数据分页的应用程序。所显示的数据，也包含图像。
我想延缓这些图像的加载为1-2秒，而用户通过数据快速分页
一旦用户停止在某一个页面，所有的图像应该是懒洋洋地装。
我想这个小提琴适应我的应用程序没有成功（见下文）。 http://jsfiddle.net/boneskull/UfrhH/3/
我的控制器code
$ scope.delay_images =功能（）{
$超时（函数（）{
返回true;
}，2000）;
};
查看code
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD风格=文本对齐：左;填充右：40像素;高度：250像素;宽度：{{100 / panel.size}}％'NG重复=事件数据|切片：panel.offset：panel.offset + panel.size＆GT;
＆LT; H4＆GT; {{event._source.Price}} {{event._source.Currency}}＆LT; / H4＆GT;
＆LT; IMG NG秀=delay_imagesNG-动画={显示：'秀'}的风格=高度：100像素'NG-SRC =/ IMG / {{event._source.image_paths}}/＆GT ;＆LT; BR /><h6>{{event._source.Title}}</h6>
＆LT;按钮NG点击=build_search（event._source）NG秀='event._source.ClusterID类型=按钮级=BTN BTN-小学＆GT;更多类似该＆lt; /按钮＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
我是相当新的angular.js这样能引导我到正确的方向任何提示都大大AP preciated。
谢谢！
更新
这是基于公认的答案部分工作code。顺便说一句，它也用于实现keydownevent的延迟。
现在的code采用NG-显示隐藏和显示图像。我意识到，这种做法是有问题的，因为它触发了大量的图像资源请求的背景而用户分页。
所以最好将是当前解决方案与第二个解决方案取代了SRC =属性莫名其妙地结合起来。
我会如何呢？我赶上从周围DIV的keydownevent，所以我没有直接的句柄图像。是否有访问类具有角JS元素的方法吗？就像一个jQuery选择？
VAR lastFire = 0;
$ scope.changeIndex =功能（$事件）{ 如果（$ event.key code == || 37 $ event.key code == 39）{ VAR cFire =新的日期（）;
//取消旧超时
如果（$ scope.panel.timeoutId）{
$ timeout.cancel（$ scope.panel.timeoutId）;
} // $ event.key code ...
如果（（cFire - lastFire）/ 1000 GT 0.3）{ //隐藏图像下手
$ scope.panel.imagesVisible = FALSE;
如果（$ event.key code == 37安培;＆安培; $ scope.panel.offset大于0）{
$ scope.panel.offset = $ scope.panel.offset - 10;
// $ scope.get_data（）;
lastFire = cFire;
$ scope.panel.timeoutId = $超时（函数（）{
$ scope.panel.imagesVisible =真;
$ scope.panel.timeoutId =不确定;
}，1000）; }
如果（$ event.key code == 39安培;＆安培; $ scope.panel.offset＆LT; $ scope.data.length - 10）{
$ scope.panel.offset = $ scope.panel.offset + 10;
// $ scope.get_data（）;
lastFire = cFire;
$ scope.panel.timeoutId = $超时（函数（）{
$ scope.panel.imagesVisible =真;
$ scope.panel.timeoutId =不确定;
}，1000）;
} }
其他{
$ scope.panel.timeoutId = $超时（函数（）{
$ scope.panel.imagesVisible =真;
$ scope.panel.timeoutId =不确定;
}，1000）;
}}
};
我觉得最简单的事情是处理它，当你分页。比方说，这是你打电话页面功能：
$ scope.changeOffset =功能（偏移）{
$ scope.panel.offset =抵消; //取消旧超时
如果（$ scope.panel.timeoutId）{
$ timeout.cancel（$ scope.panel.timeoutId）;
} //隐藏图像下手
$ scope.panel.imagesVisible = FALSE; $ scope.panel.timeoutId = $超时（函数（）{
$ scope.panel.imagesVisible =真;
$ scope.panel.timeoutId =不确定;
}，2000）;
}）;
然后在网页上的所有图像可以使用标志：
＆LT; IMG NG秀=panel.imagesVisible...
I have an app that allows paginating through a large text dataset via the keyboard's right/left arrow keys. The data that is displayed, also contains images.
I would like to delay the loading of these images for 1-2 seconds while the user is paginating through the data quickly.
As soon as the user stops at a certain page, all images should be "lazily" loaded.
I tried to adapt this fiddle to my app without success (see below). http://jsfiddle.net/boneskull/UfrhH/3/
my controller code
$scope.delay_images = function() {
$timeout(function() {
return true;
}, 2000);
};
view code
<tbody>
<tr>
<td style='text-align:left;padding-right:40px; height:250px;width:{{100 / panel.size}}%' ng-repeat="event in data| slice:panel.offset:panel.offset+panel.size">
<h4>{{event._source.Price}} {{event._source.Currency}}</h4>
<img ng-show="delay_images" ng-animate="{show: 'show'}" style='height:100px' ng-src="/img/{{event._source.image_paths}}"/><br /><h6>{{event._source.Title}}</h6>
<button ng-click="build_search(event._source)" ng-show='event._source.ClusterID' type="button" class="btn btn-primary">More like this</button>
</td>
</tr>
</tbody>
I am fairly new to angular.js so any tips that can guide me into the right direction are greatly appreciated.
Thanks!
UPDATE
This is a partially working code based on the accepted answer. BTW, it also implements a delay for the keydownevent.
Right now the code uses ng-show to hide and show images. I realized that this approach is problematic because it triggers a lot of image resource requests in the background while the user is paging.
So the best would be to combine the current solution somehow with the second solution replacing the src= attribute.
How would I go about that? I am catching the keydownevent from a surrounding div, so I have no direct handle to the images. Is there a way to access a class of elements with angular js? Just like with a jquery selector?
var lastFire = 0;
$scope.changeIndex = function($event) {
if($event.keyCode == 37 || $event.keyCode == 39){
var cFire = new Date();
// cancel old timeout
if ($scope.panel.timeoutId) {
$timeout.cancel($scope.panel.timeoutId);
}
// $event.keyCode...
if ((cFire - lastFire) / 1000 > 0.3){
// hide images to start with
$scope.panel.imagesVisible = false;
if ($event.keyCode == 37 && $scope.panel.offset > 0){
$scope.panel.offset = $scope.panel.offset - 10;
//$scope.get_data();
lastFire = cFire;
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 1000);
}
if ($event.keyCode == 39 && $scope.panel.offset < $scope.data.length - 10){
$scope.panel.offset = $scope.panel.offset + 10;
//$scope.get_data();
lastFire = cFire;
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 1000);
}
}
else{
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 1000);
}
}
};
I think the simplest thing would be to handle it when you are paging. Let's say this is the function you call to page:
$scope.changeOffset = function(offset) {
$scope.panel.offset = offset;
// cancel old timeout
if ($scope.panel.timeoutId) {
$timeout.cancel($scope.panel.timeoutId);
}
// hide images to start with
$scope.panel.imagesVisible = false;
$scope.panel.timeoutId = $timeout(function() {
$scope.panel.imagesVisible = true;
$scope.panel.timeoutId = undefined;
}, 2000);
});
Then all images on the page can use the flag:
<img ng-show="panel.imagesVisible" ...
这篇关于什么是延迟加载图像角中最简单的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
