[Angularjs]angular ng-repeat与js特效加载先后导致的问题
写在前面
最近在项目中遇到这样的一个前端的bug,在ng-repeat中绑定的图片,有一个晃动的特效,在手机端浏览的时候,图片有时候会正常展示,有时就展示不出来。当时猜测是因为angularjs与特效的那些代码加载的先后顺序造成的。有了这样的猜测,就有查找解决方案的方向了。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-show和ng-hide
[Angularjs]视图和路由(一)
[Angularjs]视图和路由(二)
[Angularjs]视图和路由(三)
[Angularjs]视图和路由(四)
[Angularjs]ng-class,ng-class-even,ng-class-odd
[Angularjs]单页应用之分页
[Angularjs]国际化
[Angularjs]ng-repeat中使用ng-model遇到的问题
[Angularjs]过滤器
[Angularjs]ng-file-upload上传文件
解决方案
自定义一个指令,在加载完成angular repeat时,然后再去绑定那些特效。具体如下所示:
var app = angular.module('mylibraryapp', ['ngRoute', 'pascalprecht.translate', 'ngFileUpload']);//指令 app.directive('onFinishRenderFilters', function ($timeout) {return {restrict: 'A',link: function (scope, element, attr) {if (scope.$last === true) {$timeout(function () {scope.$emit('ngRepeatFinished');});}}} });
在使用ng-repeat的标签上面添加这样的代码
<div class="item" id="filediv" ng-repeat="file in files" on-finish-render-filters>........ </div>
在对应的Controller里面,添加angular repeat执行完成的回调方法
//加载完成$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {new WOW().init();var h = $(window).height();$(".modal-dialog").css("margin-top", (h / 2) - 100 + "px");});
总结
这个问题折腾了很长时间,在电脑上测试测试不出来,在部分低版本的android手机上面有这样的问题。
转载于:https://www.cnblogs.com/wolf-sun/p/5089637.html
[Angularjs]angular ng-repeat与js特效加载先后导致的问题相关推荐
- php 页面加载图片卡,javascript,图片_js动态加载image导致浏览器很卡,javascript,图片 - phpStudy...
js动态加载image导致浏览器很卡 function addImage(logo,userid,name,style){ console.log("addImage"); var ...
- 原生JS实现加载进度条
分享一个原生JS实现的动态加载进度条特效,效果如下: 实现的代码如下: <!DOCTYPE html> <html><head><meta http-equi ...
- Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
- three.js 楼层加载动画
three.js 楼层加载动画 概述 创建场景 创建天空 创建水面 创建模型 开启模型动画 栅栏动画 概述 如有不明白的可以加QQ:2354528292:wx: aichitudousien 更多教学 ...
- 解决ie9兼容性问题之js无法加载
ie9下js无法加载有几种情况: 1.禁止a标签默认事件,将a href='javascript;'换成e.preventDefault(); 2.如果页面有console.log也会导致js无法加载 ...
- jquery跟js初始化加载的多种方法及区别介绍
jquery是等待页面加载完数据,以及页面部分元素:js是页面全部加载完成才执行初始化加载,具体示例祥看本文 jquery和js初始化加载页面的区别: jquery:等待页面加载完数据,以及页面部分 ...
- 判断CSS与JS是否加载完毕的方法
简单而有效的思路:三步走 一.显示默认提示:直接在页面上标识一个友好的提示:例如xxx,系统加载未完成,建议您刷新后再进行yy操作 二.css加载完毕:对提示内容进行处理:例如红色提示变..黄色警告 ...
- php动态加载js,动态加载script文件的两种方法_javascript技巧
动态加载script到页面大约有俩方法 第一种就是利用ajax方式,把script文件代码从后台加载到前台,然后对加载到的内容通过eval()执行代码.第二种是,动态创建一个script标签,设置其s ...
- JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
最新文章
- concat mysql sql注入_sql注入-mysql注入基础及常用注入语句
- Beamer 目录分栏
- struct output SVM
- TensorFlow中loss与val_loss、accuracy和val_accuracy含义
- 北京/苏州内推 | 微软STCA搜索广告算法团队招聘NLP算法工程师
- css属性 background
- flexjava通信错误之一:Server.resource.unavailable
- 未来云原生世界的“领头羊”:容器批量计算项目Volcano 1.0版本发布
- vue项目做微信分享功能
- 开发利器之IntelliJ IDEA学习笔记
- 单链表插入、删除操作单步解析(十三)
- ceph 存储 对比_对象存储cleversafe对比ceph有哪些优势?
- Linux 的 history 命令显示时间
- 系统调用之Write
- Python 3.5 协程究竟是个啥
- 好儿优机器人_好儿优机器人app
- ubuntu16.04安装谷歌拼音输入法并可在QtCreator中使用
- word打印设置相关
- iphone铃声制作
- 2022年度前8强20强|香港科大-越秀集团百万奖金国际创业大赛·2022年度总决赛第一轮评审结果公布!...
热门文章
- linux系统ftp优化,Linux vsftp 部署优化
- 怎么添加流程图画布_工作流程图软件,教你绘制简单的工作流程图!
- matlab在linux效率高吗,取代matlab, Linux下科学计算环境的搭建
- oracle做子查询注意事项,Oracle子查询详解
- 为你的应用程序添加动态Java代码
- 解决Hadoop总是处于安全模式的问题
- Python编程基础05:运算符与表达式
- NOIP 2016(不是游记)
- 【POJ1177】【HDU1828】【codevs2149】矩形面积周长并
- 曲线聚类_R语言确定聚类的最佳簇数:3种聚类优化方法