<html>

<title>图片预加载</title>

<body>

<script>

//判断浏览器

var Browser=new Object();

Browser.userAgent=window.navigator.userAgent.toLowerCase();

Browser.ie=/msie/.test(Browser.userAgent);

Browser.Moz=/gecko/.test(Browser.userAgent);

//判断是否加载完成

function Imagess(url,imgid,callback){

  var val=url;

  var img=new Image();

  if(Browser.ie){

    img.onreadystatechange =function(){

      if(img.readyState=="complete"||img.readyState=="loaded"){

        callback(img,imgid);

      }

    }

  }else if(Browser.Moz){

    img.onload=function(){

      if(img.complete==true){

        callback(img,imgid);

      }

    }

  }

  //如果因为网络或图片的原因发生异常，则显示该图片

  img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}

  img.src=val;

}

//显示图片

function checkimg(obj,imgid){

document.getElementById(imgid).src=obj.src;

}

//初始化需要显示的图片，并且指定显示的位置

window.onload=function(){

  Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img1",checkimg);

  Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img2",checkimg);

  Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img3",checkimg);

  Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-8277.jpg","img4",checkimg);

  Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc294","img5",checkimg);

}

</script>

<img id="img1" src="loading.gif" width="100" height="100" />

<img id="img2" src="loading.gif" width="100" height="100" />

<img id="img3" src="loading.gif" width="100" height="100" />

<img id="img4" src="loading.gif" width="100" height="100" />

<img id="img5" src="loading.gif" width="100" height="100" />

</body>

</html>

javascript图片加载完成前显示loading图片的更多相关文章

  1. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现

    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...

  2. vue项目未加载完成前显示loading...

    1.在Index.html里面加入loading的元素,让loading元素显示,让app元素隐藏 <!DOCTYPE html> <html> <head> &l ...

  3. ionic 图片加载失败，显示默认图片代替

    1.首先编写自定义指令 angular.module('starter.directives', []) //当图片找不到事显示替代图片 .directive("errSrc", ...

  4. 在页面未加载完之前显示loading动画

    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...

  5. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失

    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...

  6. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  7. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  8. img 加载网络图片失败 显示默认图片

    1. 概述 当从网络加载图片失败 希望显示默认图 img 标签有个 onerror属性 2. 代码 2.1 java服务端组织标签整个返回前端 String imgUrl = "javasc ...

  9. 【JavaScript】图片加载由模糊变清晰 —— 图片优化

    开发过程中,一些图片的展示时,加载很慢很久,后来把图片缩放压成缩略图吧,速度是快了但是模糊不清,如何处理这样问题,下面就和大家分享一下自己的处理方法. 先让客户端加载像素小的缩略图: <img ...

随机推荐

  1. MATLAB学习1 之画图函数

    ezplot适用条件 "ezplot"命令可以用于显函数.隐函数和参数方程作图. 不同函数的使用格式 显函数y=f(x),ezplot函数的调用格式为ezplot(f, [xmin ...

  2. 《OSPF和IS-IS详解》一1.5 ARPANET内的路由选择

    本节书摘来异步社区<OSPF和IS-IS详解>一书中的第1章,第1.5节,作者: [美]Jeff Doyle 译者: 孙余强 责编: 傅道坤,更多章节内容可以访问云栖社区"异步社 ...

  3. java中异常的处理

    异常分为运行时的异常和检测异常: java提供了两种异常机制.一种是运行时异常(RuntimeExepction),一种是检查式异常(checked execption). 运行时的异常就是在java ...

  4. Algs4-2.1.17动画-选择排序

    2.1.17动画.修改插入排序和选择排序的代码,使之将数组内容绘制成正文中所示的棒状图.在每一轮排序后重绘图片来产生动画效果,并以一张"有序"的图片作为结束,即所有圆棒均已按照高度 ...

  5. Flask中可以利用Flask-SQLAlchemy

    为什么80%的码农都做不了架构师?>>>   官方文档:http://flask-sqlalchemy.pocoo.org/2.3/ 1.安装(进入虚拟环境)--利用镜像安装PyMy ...

  6. 微信Webapp开发的各种变态路由需求及解决办法!

    前言 最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的! 调试缓存 问题描述: 微信打开的web页面默认是会缓存 ...

  7. CC视频CTO栗伟：CDN系统架构及CC视频应用实践

    2017 年 11 月9日,CC视频获2.08 亿元C轮融资. EGO 北京分会会员.CC视频CTO栗伟获邀作为 EGO 线上分享第三季嘉宾,与大家交流了CDN系统架构及CC 视频的应用实践. \\ ...

  8. Codeforce 1311A Add Odd or Subtract Even

    Add Odd or Subtract Even time limit per test2 seconds memory limit per test256 megabytes inputstanda ...

  9. GCRoots

    JVM面试汇总 JVM垃圾回收的时候如何确定垃圾?是否知道什么是GC Roots 什么是垃圾 简单来说就是内存中已经不再被使用的空间就是垃圾 如何判断一个对象是否可以被回收 引用计数法 Java中,引 ...

  10. Proteus传感器+气体浓度检测的报警方式控制仿真

    Proteus传感器+气体浓度检测的报警方式控制仿真 目录 Proteus传感器+气体浓度检测的报警方式控制仿真 1 实验意义理解 2 主要实验器件 3 实验参考电路 4 实验中的问题思考 4.1 实 ...