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

 这篇文章主要介绍了JavaScript控制图片加载完成后调用回调函数的方法,实例分析了javascript回调函数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

 
 

本文实例讲述了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程序设计有所帮助。

时间: 2024-11-03 04:22:47

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

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

本文实例讲述了JavaScript控制图片加载完成后调用回调函数的方法.分享给大家供大家参考.具体分析如下: 这段代码可以控制指定区域内的图片加载完成后执行指定的回调函数. 复制代码 代码如下: function when_images_loaded($img_container, callback) { /* do callback when images in $img_container (jQuery object) are loaded. Only works when ALL ima

JavaScript实现当网页加载完成后执行指定函数的方法_javascript技巧

本文实例讲述了JavaScript实现当网页加载完成后执行指定函数的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了如何在网页加载完成时调用指定的函数,并且可以通过第二段代码动态添加多个函数同时执行. 我们只需要给window.onload指定一个函数既可以在页面加载完成时自动执行MyCoolInitFunc函数 <script type="text/javascript" > window.onload = MyCoolInitFunc </scri

Javascript实现图片加载从模糊到清晰显示的方法_javascript技巧

1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差. 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片.该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示

Activity完全加载完毕后的回调函数

@Override public void onWindowFocusChanged(boolean hasFocus) { // TODO Auto-generated method stub super.onWindowFocusChanged(hasFocus); } 这个onWindowFocusChanged指的是这个Activity得到或者失去焦点的时候 就会call..   也就是说 如果你想要做一个Activity一加载完毕,就触发什么的话 完全可以用这个 这个事件可以实现当一个

JavaScript前端图片加载管理器imagepool使用详解_基础知识

前言       imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数.       对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />.       经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动

JavaScript imagepool图片加载管理器使用教程

前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片url" />. 经过不断优化,出现了图片延迟加载方案,这回图片的URL不直接写在src属性中,而是写在某个属性中,比如:<img src="" data-src="图片url" />.这样浏览器就不会自动加载图片,等到一个恰当的时机需要加载

js判断图片加载完成后获取图片实际宽高的方法_javascript技巧

本文实例讲述了js判断图片加载完成后获取图片实际宽高的方法.分享给大家供大家参考,具体如下: 通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置了图片的宽高后获取的就不是图片的实际宽高,这显然在有些时候不是我们想要的结果,那么有没有一种方法来获取这样的实际宽高呢?答案是有的.下面的代码就能解决这样的问题: <img src="01.jpg&q

jQuery实现图片加载完成后改变图片大小的方法_jquery

本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

ios-默认图片加载完后播放视频

问题描述 默认图片加载完后播放视频 应用在默认图片加载后播放4秒的视频.如何实现? -(void)viewWillAppear:(BOOL)animated { NSString* moviePath = [[NSBundle mainBundle] pathForResource:@"intro_anim" ofType:@"mov"]; NSURL* movieURL = [NSURL fileURLWithPath:moviePath]; NSLog(@&qu