jquery html() callback
通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片。问题是JQuery的.html()函数是同步的,如果我们想知道HTML被加载之后容器的高,例如获取容器的offsetHeight或scrollHeight属性的值,必须要等HTML元素中所有的内容都加载完毕后才能获取到真实的值,尤其是HTML中包含有image标签时。那如何才能实现.html()函数的回调方法呢?答案是使用前端的Q.
对应的代码如下:
var defer = Q.defer();
var realHtml = $('#html-canvas');
realHtml.html(html);
var contentImages = $("#html-canvas img");
var totalImages = contentImages.length;
var loadedImages = 0;
if (contentImages.length === 0) defer.resolve();
else {
contentImages.each(function(){
$(this).on('load', function(){
loadedImages++;
if(loadedImages == totalImages)
{
defer.resolve();
}
});
});
}
return defer.promise.then(function () {
console.log('all done.');
});
首选通过JQuery选择器找到容易中已加入HTML的所有img元素,然后给所有img元素添加onLoad事件,并判断是否所有img元素的onLoad事件是否都已经触发(loadedImages == totalImages)。然后通过defer.resolve()来通知Q的promise已完成异步操作,然后在.then()函数中就可以继续下一步操作了。
jquery html() callback的更多相关文章
- jQuery 之 Callback 实现
在 js 开发中,由于没有多线程,经常会遇到回调这个概念,比如说,在 ready 函数中注册回调函数,注册元素的事件处理等等.在比较复杂的场景下,当一个事件发生的时候,可能需要同时执行多个回调方法,可 ...
- jQuery 常用速查
jQuery 速查 基础 $("css 选择器") 选择元素,创建jquery对象 $("html字符串") 创建jquery对象 $(callback) $( ...
- jQuery初级篇(一)
知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一. jQ ...
- 动态加载(异步加载)jquery/MUI类库 页面加载完成后加载js类库
动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...
- jquery 原理
/* * my-jquery-1.0 *//* * 网上也有很多实现的版本,不过这是我在我自己的理解下写的,加上注释,希望可以解释清楚.*//* * 整个jquery包含在一个匿名函数中,专业点叫闭包 ...
- Jquery EasyUI封装简化操作
//confirm function Confirm(msg, control) { $.messager.confirm('确认', msg, function (r) { if (r) { eva ...
- jquery源码分析
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 前段时间上班无聊之时,研究了 ...
- 一篇介绍jquery很好的
本文基于jQuery1.7.1版本,是对官方API的整理和总结,完整的官方API见http://api.jquery.com/browser/ 0.总述 jQuery框架提供了很多方法,但大致上可以分 ...
- 26 个 jQuery使用技巧
1. 禁用右键点击(Disable right-click) $(document).ready(function(){ $(document).bind("contextmenu" ...
随机推荐
- 关于静态注册BroadcastReceiver接收不到广播的问题
1.背景&解决方法 最近碰到一个需求,app监听特定的广播,接收到广播后启动自己再进行处理.需求很简单,静态注册就好,不过,在自测的时候遇到一个问题,app安装后没启动过的状态下,什么广播都收 ...
- Zabbix系统介绍
监控概述 硬件监控 IPMI介绍文档:http://www.ibm.com/developerworks/cn/linux/l-ipmi/ 温度:使用ipmi对硬件温度,进行监控 硬盘:使用MegaC ...
- Unity User Group深圳站——Timeline & Cinemachine分享
报名说明:UUG深圳站,2月分享活动正式启动,1月29日中午12:00前报名可获赠Unity精美纪念礼物一份~ 关于Unity Unity 是一款多平台的综合型游戏开发工具,它的出现对蓬勃发展的全球游 ...
- js生成[n,m]的随机数,js如何生成随机数,javascript随机数Math.random()
一.预备知识 Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ 1 ...
- Java内存模型一个经典例子-指令重排序与CPU指令多发射导致执行结果异常
先上代码: import java.util.concurrent.BrokenBarrierException; import java.util.concurrent.CyclicBarrier; ...
- python进程和线程(五)
python的进程 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包m ...
- 从零开始学习PYTHON3讲义(十四)写一个mp3播放器
<从零开始PYTHON3>第十四讲 通常来说,Python解释执行,运行速度慢,并不适合完整的开发游戏.随着电脑速度的快速提高,这种情况有所好转,但开发游戏仍然不是Python的重点工作. ...
- springboot~Mongodb的集成与使用
说说springboot与大叔lind.ddd的渊源 Mongodb在Lind.DDD中被二次封装过(大叔的.net和.net core),将它当成是一种仓储来使用,对于开发人员来说只公开curd几个 ...
- [翻译] 使用 Python 创建你自己的 Shell:Part I
目录 使用 Python 创建你自己的 Shell:Part I 原文链接与说明 步骤 0:项目结构 步骤 1:Shell 循环 步骤 2:命令切分 步骤 3:执行 运行 使用 Python 创建你自 ...
- 还在问跨域?本文记录js跨域的多种实现实例
前言 众所周知,受浏览器同源策略的影响,产生了跨域问题,那么我们应该如何实现跨域呢?本文记录几种跨域的简单实现 前期准备 为了方便测试,我们启动两个服务,10086(就是在这篇博客自动生成的项目,请戳 ...