图片加载完成再执行事件的实例

 更新时间:2017年11月16日 09:34:12   作者:哈哈敲敲  
下面小编就为大家分享一篇图片加载完成再执行事件的实例,具有很好的参考价值,一起跟随小编过来看看吧,希望对大家有所帮助

实例如下:

//图片加载
function load(imgSrc,callback) {
 var imgs = [];
 var c = 0;
 for (var i = 0; i < imgSrc.length; i++) {
  imgs[i] = new Image();
  imgs[i].src = imgSrc[i];
  imgs[i].onload = function(){
   c++
   if(c == imgSrc.length){
    if(callback){
     callback();
    }
   }
  }
 }
 return imgs;
}

应用场景:一些图片较多的页面,一些需要加上进度条或者百分比读取等加载效果的页面,一般移动端页面用得比较多

以上这篇图片加载完成再执行事件的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • div模拟滚动条效果示例代码

    div模拟滚动条效果示例代码

    滚动条想必大家都见过吧,在本文将使用div来模拟滚动条的效果,具体实现如下,感兴趣的朋友可以参考下
    2013-10-10
  • JQuery 前台切换网站的样式实现

    JQuery 前台切换网站的样式实现

    本文说的是在WordPress中怎样利用JQuery在网站的前台切换样式的方法。或者这篇文章的方法大家可能不是太需要,因为我觉得这是解决我被主题样式折腾到差不多分裂的原因及结果的最后手段。
    2009-06-06
  • 使用JavaScript和CSS实现简单的字符计数器

    使用JavaScript和CSS实现简单的字符计数器

    在本文中,你将学习如何使用 JavaScript 创建字符计数器。计数的数字可以在小显示屏中看到。文中示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-08-08
  • 微信小程序中使用 async/await的方法实例分析

    微信小程序中使用 async/await的方法实例分析

    这篇文章主要介绍了微信小程序中使用 async/await的方法,结合实例形式分析了微信小程序中async/await的功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-05-05
  • ES6新特性之字符串的扩展实例分析

    ES6新特性之字符串的扩展实例分析

    这篇文章主要介绍了ES6新特性之字符串的扩展,结合实例形式对比分析了ES5与ES6字符串函数以及模板字符串相关操作技巧,需要的朋友可以参考下
    2017-04-04
  • 实例解析js中try、catch、finally的执行规则

    实例解析js中try、catch、finally的执行规则

    本文主要通过实例解析来更好的了解js中try、catch、finally的执行规则,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 浅析js中的浮点型运算问题

    浅析js中的浮点型运算问题

    本篇文章主要是对js中浮点型运算的问题进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • js实现超级玛丽小游戏

    js实现超级玛丽小游戏

    这篇文章主要为大家详细介绍了js实现超级玛丽小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • JavaScript实现设计模式中的单例模式的一些技巧总结

    JavaScript实现设计模式中的单例模式的一些技巧总结

    单例模式是JavaScript项目中最常用的设计模式之一,下面罗列了JavaScript实现设计模式中的单例模式的一些技巧总结,包括惰性加载与分支技术等,需要的朋友可以参考下.
    2016-05-05
  • javascript代码混淆与加解密方式

    javascript代码混淆与加解密方式

    这篇文章主要介绍了javascript代码混淆与加解密方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论