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判断两个日期是否相等的方法
Sep 10 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
跟我学Laravel之请求(Request)的生命周期
2014/10/15 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
Angular 数据请求的实现方法
2018/05/07 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
vue 限制input只能输入正数的操作
2020/08/05 Javascript
python中mechanize库的简单使用示例
2014/01/10 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python 以16进制打印输出的方法
2018/07/09 Python
flask入门之文件上传与邮件发送示例
2018/07/18 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
会计专业求职信范文
2014/03/16 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
相亲大会策划方案
2014/06/05 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python