一.前言 最近做了一个图片懒加载的小插件,功能需要dom渲染完成后,好获取那些需要懒加载的dom元素.那么问题来了,如果只是感知静态的dom用ready,onload都可以,但项目用的angular,ng-repeat什么时候循环完,或者说angular自身的生命周期中dom渲染完成怎么知道,这里做个解决问题的记录. 二.网上流传的解决方案 1.data-ng-init---无效 大概意思是,给你需要监听的dom,比如body添加一个data-ng-init属性,绑定你需要在body加载完成后执…

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v…

业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$la…

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co…

在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要的内容.原因是当我们获取的时候内容还没有改变,所以获取不到,如果就想到监听这个DIV内容变化后,再来获取就个时候就能获取到了.于是产生新的问题,如何监听DIV的变化? 以下为监听DOM结构变化时的JS代码 $("#wb_follow_btn").bind('DOMNodeInserted'…

js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.addEventListener('DOMAttrModified',function(){alert(1)},false);document.addEventListener('DOMNodeRemoved',function(){alert(1)},false); 参考地址: https://de…

原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver      // 选择目标节点   var target = document.querySelector('#some-id');       // 创建观察…

jQuery的extend方法 function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类 // console.log(this); for(var key in obj){ // njQuery["isTest"] = function () {console.log("test");} this[key] = obj[key]; } } njQuery…

1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 mutation events 呢,我们先了解一下mutation events Mutation Events Mutation events 是在 DOM3中定义,用于监听DOM树结构变化的事件 它简单的用法如下: document.getElementById('list').addEvent…

开发过程中总会遇到dom节点尺寸变化,去做一些相应的逻辑,第一想到的应该是用$(window).resize()去做,但是这个是监听浏览器窗口的所以这个时候要用 ResizeObserver ResizeObserver可以帮助我们监听一个DOM节点的变化 1.节点的显示和隐藏 2.节点的size变化 兼容性 ResizeObserver API使用了观察者模式,也就是我们常说的发布-订阅模式 var resizeObserver = new ResizeObserver(function( e…

1. 代码初始化一次执行部分属性为空的情况 原因: 异步加载 + 立马 传值时 直接渲染 dom里面  能实时更新 (无影响) 不能直接dom中渲染(有影响)     解决方法:需要通过监听的方式来处理返回值 异步加载 + 过后点击 通过其他方法传值(如:vuex  ) 直接dom里面  能实时更新(无影响) 不能直接在dom中渲染(基本无影响) 异步加载 + v-if 直接dom里面  能实时更新(无影响) 不能直接在dom中渲染(无影响) 获取到vuex中的值  立马 传值问题 可以用计算属…

摘要: $stateChangeStart- 当模板开始解析之前触发 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ ... }) app.run(['$rootScope', '$location' ,'$cookieStore', '$state', 'CacheManager', function($rootScope, $location, $co…

有些时候我们想要监听angular js中的 ng-repeat结束事件,从而好初始化一些我们的第三方或者其他需要初始化的js. 我们可以这样处理: js 中这样定义 : //监听事件 是否加载完毕app.directive('watchLoadingPicsOver', function ($timeout) { return { restrict: 'A', link: function(scope, element, attr) { if (scope.$last === true) {…

设置滚动监听判断ListView的滚动方向同时获取屏幕高度.ListView实际高度,判断是否需要展示返回顶部按钮 package com.zihao.activity;   import java.util.ArrayList; import java.util.List;   import com.zihao.adapter.MyAdapter; import com.zihao.utils.ScreenUtil;   import android.os.Bundle; import and…

(function(win){ 'use strict'; var listeners = []; var doc = win.document; var MutationObserver = win.MutationObserver || win.WebKitMutationObserver; var observer; function ready(selector, fn){ // 储存选择器和回调函数 listeners.push({ selector: selector, fn: fn…

开发后台服务的时候经常需要对屏幕状态进行判断,如果是想要监听屏幕解锁事件,可以在配置里面注册action为 android.intent.action.USER_PRESENT的广播,则可以监听解锁事件.但有时候,在后台执行某个操作时,需要主动判断屏幕的状态,比如是否是亮着的,可以使用PowerManager的isScreenOn方法进行判断,比如屏幕是否开启了自动旋转等. 注册监听解锁广播: 1 2 3 4 5 <receiver android:name="com.home.tests…

页面的提交按钮采用的是固定定位在页面的底部,键盘弹出后,提交按钮紧挨着键盘的上方,输入框获得焦点后,键盘弹出,并且输入框回自动定位上方的空白处,此时由于键盘上方固定定位的提交按钮的原因有可能会遮挡住获得焦点的输入框,从而导致用户看不见输入框,需要用户手动滑动屏幕,移动输入框的位置,才可以进行输入内容. 解决办法: 1.监听window的大小的变化,来判断键盘的弹出和收回 2.获取输入框底部的偏移位置,即输入框底部距离可见区域上面的距离A==输入框.offsetTop-屏幕卷起的高度 3.获得可见…

MutationObserver 是用于代替 MutationEvents 作为观察 DOM 树结构发生变化时,做出相应处理的 API .为什么要使用 MutationObserver 去代替 MutationEvents 呢,我们先了解一下 MutationEvents MutationEvents 它简单的用法如下: document.getElementById('list').addEventListener( 'DOMSubtreeModified', () => { console.…

监听中第三个参数,何时使用true? true的意思是“深度监听” 1.当监听对象属性变化时,而你监听的对象写得是对象,此时要用深度监听true: 2....... 监听耗资源,用完关闭 var watch = $scope.$watch("",""); ......... watch() http://blog.csdn.net/zcl_love_wx/article/details/51383548 为true时:将会检查监听对象的每个属性是否发生变化.适用于监…

一.无参 <div id="J_app"> <button v-on:click="eatWhat">吃啥</button> </div> var vapp = new Vue({ el: '#J_app', data: { info: '我想吃苹果' }, methods: { eatWhat: function () { alert(this.info) } } }) 二.有参 <div id="J…

本文转自:https://blog.csdn.net/ittvibe/article/details/80060801 转自:http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener import { HostListener} from "@angular/core"; @HostListener("window:scroll", []) onWindowSc…

一.引用fromEvent import { fromEvent } from 'rxjs'; 二.调用fromEvent this.subscribeScoll = fromEvent(window, 'scroll') .subscribe((event) => { this.onWindowScroll(); }); onWindowScroll(){console.log(页面滚动了);}: 三.调用滚动函数 详细代码: import { Component, OnInit } from…

添加如下代码即可(function($,h,c){var a=$([]),e=$.resize=$.extend($.resize,{}),i,k="setTimeout",j="resize",d=j+"-special-event",b="delay",f="throttleWindow";e[b]=250;e[f]=true;$.event.special[j]={setup:function(){i…

直接上代码: Module.directive('renderFinish', function ($timeout) { //renderFinish自定义指令 return { restrict: 'A', link: function(scope, element, attr) { if (scope.$last === true) { $timeout(function() { scope.$emit('ngRepeatFinished'); }); } } }; }); /* 控制器…

$("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.target).html()); });…

$scope.$on("$destroy", function() { //...})…

ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); watchExpression 需要监控的表达式 listener 处理函数,函数参数如下 function(newValue,oldValue, scope) objectEquality 是否深…

ANGULAR 监听使用: 当angular数据模型发生变化时,我们需要如果需要根据他的变化触发其他的事件. $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); watchExpression 需要监控的表达式 listener 处理函数,函数参数如下 function(newValue,oldValue, scope) objectEquality 是否深…

原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 div,是隐藏不可见的,当目标 dom 大小变化时,触发滚动事件.参考文章 通过 MutationObserver 监听dom 节点变化,MutationObserver 是在DOM4规范中定义的,它的前身是 MutationEvent 事件,该事件最初在 DOM2 事件规范中介绍,到来了 DOM3…

前言 以下几个API,在web开发中可以简化我们一部分交互操作. Fullscreen API 有时候我们想要全屏预览的效果,比如类似于图片预览.幻灯片播放等.全屏API是一个很好的选择. 基本用法 打开全屏 element.requestFullscreen().then(() => { // 成功的处理 }).catch(err => { // 失败的处理 }) 退出全屏 element.exitFullscreen().then(() => { // 成功的处理 }).catch(…