JavaScript控制图片加载完成后调用回调函数的方法


Posted in Javascript onMarch 20, 2015

本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法。分享给大家供大家参考。具体分析如下:

这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数。

function when_images_loaded($img_container, callback) {

/* do callback when images in $img_container (jQuery object) are loaded. Only works when ALL images in $img_container are newly inserted images and this function is called immediately after images are inserted into the target. */

    var _imgs = $img_container.find('img'),

        img_length = _imgs.length,

        img_load_cntr = 0;

    if (img_length) {//if the $img_container contains new images.

        _imgs.on('load', function() {//then we avoid the callback until images are loaded

            img_load_cntr++;

            if (img_load_cntr == img_length) {

                callback();

            }

        });

    }

    else { //otherwise just do the main callback action if there's no images in $img_container.

        callback();

    }

}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
web前端开发JQuery常用实例代码片段(50个)
Aug 28 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 #Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 #Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 #Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 #Javascript
初识Node.js
Mar 20 #Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 #Javascript
JS实现的数组全排列输出算法
Mar 19 #Javascript
You might like
提取HTML标签
2006/10/09 PHP
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
2015/05/28 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
微信小程序实现购物页面左右联动
2019/02/15 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
ABOUT YOU匈牙利:500个最受欢迎的时尚品牌
2019/07/19 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
自动化系在校本科生求职信
2013/10/23 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
导游词之包公祠
2019/11/25 职场文书
导游词之日本富士山
2020/01/06 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python
MySQL数据库 安全管理
2022/05/06 MySQL