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

实例如下：

//图片加载
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;
}

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

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

赞 (0)

相关推荐

  • 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

  • JS实现文档加载完成后执行代码

    在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style type="text/css"> div{ width:200px; height:200px; } </style

  • 使用JavaScript判断图片是否加载完成的三种实现方式

    使用JavaScript判断图片是否加载完成的三种实现方式

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src=&

  • javascript页面加载完执行事件代码

    复制代码 代码如下: <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成                 document.onreadystatechange = function () {                    if(document.readyState=="complete") {                       

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

    实例如下: //图片加载 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(); } } }

  • Dom加载让图片加载完再执行的脚本代码

    现在,我们来研究一下如何解决这个问题,解决方法就是在DOM加载完毕之后就执行程序. 先介绍两个人.一,jquery的作者:John Resig:二,javascript的世界级大师:dean edwards.(大家要记住这两位天才!) jquery里有专门解决DOM加载的函数$(document).ready()(简写就是$(fn)),非常好用!John Resig在<Pro JavaScript Techniques>里,有这样一个方法处理DOM加载,原理就是通过document&&

  • Android编程图片加载类ImageLoader定义与用法实例分析

    本文实例讲述了Android编程图片加载类ImageLoader定义与用法.分享给大家供大家参考,具体如下: 解析: 1)图片加载使用单例模式,避免多次调用时产生死锁 2)核心对象 LruCache 图片加载时先判断缓存里是否有图片,如果有,就使用缓存里的 没有就加载网络的,然后置入缓存 3)使用了线程池ExecutorService mThreadPool技术 4)使用了Semaphore 信号来控制变量按照先后顺序执行,避免空指针的问题 如何使用: 在Adapter里加载图片时 复制代码 代

  • 微信小程序 图片加载（本地，网路）实例详解

    微信小程序 图片加载（本地，网路）实例详解

    在微信小程序中,要显示一张图片,有两种图片加载方式: 加载本地图片 加载网络图片 加载本地图片 <image class="widget__arrow" src="/image/arrowright.png" mode="aspectFill"> </image> src="/image/arrowright.png" 这句就是加载本地图片资源的.想想iOS中的加载本地图片,imageName:,类似.

  • Android图片加载利器之Picasso源码解析

    Android图片加载利器之Picasso源码解析

    看到了这里,相信大家对Picasso的使用已经比较熟悉了,本篇博客中将从基本的用法着手,逐步的深入了解其设计原理. Picasso的代码量在众多的开源框架中算得上非常少的一个了,一共只有35个class文件,但是麻雀虽小,五脏俱全.好了下面跟随我的脚步,出发了. 基本用法 Picasso.with(this).load(imageUrl).into(imageView); with(this)方法 public static Picasso with(Context context) { if

  • js实现图片加载淡入淡出效果

    本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下 HTML代码 首先是图片标记的写法: <img data-src="/path/to/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值填写默认的一张图片. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opaci

  • JavaScript 计算图片加载数量的代码

    通过JavaScript 来计算当前图片加载的张数. 原理: 先定义一个图片的数组,然后通过image的onload事件来计算,注意,onload在ie和火狐有所不同. 最后需要一个进度条与之结合即可. 这个脚本在做游戏的地方用得比较多. 演示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1

  • 解决js图片加载时出现404的问题

    运营网站久了之后,无法避免会出现图片404的情况,原因可能是图片文件本来就不存在或目前不存在.常见的解决方案是将404图片隐藏或者是替换为默认的图片.  img标签事件属性 img标签可使用的时间属性有: onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart

  • JavaScript前端图片加载管理器imagepool使用详解

    JavaScript前端图片加载管理器imagepool使用详解

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

随机推荐