通过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的更多相关文章

  1. jQuery 之 Callback 实现

    在 js 开发中,由于没有多线程,经常会遇到回调这个概念,比如说,在 ready 函数中注册回调函数,注册元素的事件处理等等.在比较复杂的场景下,当一个事件发生的时候,可能需要同时执行多个回调方法,可 ...

  2. jQuery 常用速查

    jQuery 速查 基础 $("css 选择器") 选择元素,创建jquery对象 $("html字符串") 创建jquery对象 $(callback) $( ...

  3. jQuery初级篇(一)

    知识说明: jQuery库是一个javascript库文件,它比起javascript来,写的更少,但做得更多,下面便对刚开始学习jQuery,一些基础知识整理出来,供后期翻阅. 一.      jQ ...

  4. 动态加载(异步加载)jquery/MUI类库 页面加载完成后加载js类库

    动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...

  5. jquery 原理

    /* * my-jquery-1.0 *//* * 网上也有很多实现的版本,不过这是我在我自己的理解下写的,加上注释,希望可以解释清楚.*//* * 整个jquery包含在一个匿名函数中,专业点叫闭包 ...

  6. Jquery EasyUI封装简化操作

    //confirm function Confirm(msg, control) { $.messager.confirm('确认', msg, function (r) { if (r) { eva ...

  7. jquery源码分析

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 前段时间上班无聊之时,研究了 ...

  8. 一篇介绍jquery很好的

    本文基于jQuery1.7.1版本,是对官方API的整理和总结,完整的官方API见http://api.jquery.com/browser/ 0.总述 jQuery框架提供了很多方法,但大致上可以分 ...

  9. 26 个 jQuery使用技巧

    1. 禁用右键点击(Disable right-click) $(document).ready(function(){ $(document).bind("contextmenu" ...

随机推荐

  1. 关于静态注册BroadcastReceiver接收不到广播的问题

    1.背景&解决方法 最近碰到一个需求,app监听特定的广播,接收到广播后启动自己再进行处理.需求很简单,静态注册就好,不过,在自测的时候遇到一个问题,app安装后没启动过的状态下,什么广播都收 ...

  2. Zabbix系统介绍

    监控概述 硬件监控 IPMI介绍文档:http://www.ibm.com/developerworks/cn/linux/l-ipmi/ 温度:使用ipmi对硬件温度,进行监控 硬盘:使用MegaC ...

  3. Unity User Group深圳站——Timeline & Cinemachine分享

    报名说明:UUG深圳站,2月分享活动正式启动,1月29日中午12:00前报名可获赠Unity精美纪念礼物一份~ 关于Unity Unity 是一款多平台的综合型游戏开发工具,它的出现对蓬勃发展的全球游 ...

  4. js生成[n,m]的随机数,js如何生成随机数,javascript随机数Math.random()

    一.预备知识 Math.ceil();  //向上取整. Math.floor();  //向下取整. Math.round();  //四舍五入. Math.random();  //0.0 ~ 1 ...

  5. Java内存模型一个经典例子-指令重排序与CPU指令多发射导致执行结果异常

    先上代码: import java.util.concurrent.BrokenBarrierException; import java.util.concurrent.CyclicBarrier; ...

  6. python进程和线程(五)

    python的进程 由于GIL的存在,python中的多线程其实并不是真正的多线程,如果想要充分地使用多核CPU的资源,在python中大部分情况需要使用多进程.Python提供了非常好用的多进程包m ...

  7. 从零开始学习PYTHON3讲义(十四)写一个mp3播放器

    <从零开始PYTHON3>第十四讲 通常来说,Python解释执行,运行速度慢,并不适合完整的开发游戏.随着电脑速度的快速提高,这种情况有所好转,但开发游戏仍然不是Python的重点工作. ...

  8. springboot~Mongodb的集成与使用

    说说springboot与大叔lind.ddd的渊源 Mongodb在Lind.DDD中被二次封装过(大叔的.net和.net core),将它当成是一种仓储来使用,对于开发人员来说只公开curd几个 ...

  9. [翻译] 使用 Python 创建你自己的 Shell:Part I

    目录 使用 Python 创建你自己的 Shell:Part I 原文链接与说明 步骤 0:项目结构 步骤 1:Shell 循环 步骤 2:命令切分 步骤 3:执行 运行 使用 Python 创建你自 ...

  10. 还在问跨域?本文记录js跨域的多种实现实例

    前言 众所周知,受浏览器同源策略的影响,产生了跨域问题,那么我们应该如何实现跨域呢?本文记录几种跨域的简单实现 前期准备 为了方便测试,我们启动两个服务,10086(就是在这篇博客自动生成的项目,请戳 ...