<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. 数学--数论--中国剩余定理 拓展 HDU 1788

    再次进行中国余数定理 问题描述 我知道部分同学最近在看中国剩余定理,就这个定理本身,还是比较简单的: 假设m1,m2,-,mk两两互素,则下面同余方程组: x≡a1(mod m1) x≡ a2(mod ...

  2. Jenkins 部署（基于 Linux）

    1.安装 JDK  我不列出来了,自行百度 java -version 2.安装 tomcat (1)创建目录 tomcat8 (2)导入 tomcat 文件到 tomcat8 录中并解压 (3)启动 ...

  3. 支付宝小程序云开发serverless----获取用户的user_id

    支付宝小程序云开发serverless----获取用户的user_id 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 开通云调 ...

  4. B. Marvolo Gaunt's Ring 前缀后缀

    B. Marvolo Gaunt's Ring 这种一般只有三个的都可以处理前缀和后缀,再枚举中间这个值. 这个和之前写过的C. Four Segments 前缀后缀 处理方式很像. #include ...

  5. Fortify Audit Workbench 笔记 File Disclosure: Spring 文件泄露（Spring框架）

    File Disclosure: Spring 文件泄露(Spring框架) Abstract 若通过用户输入构造服务器端重定向路径,攻击者便能够下载应用程序二进制码(包括应用程序的类或 jar 文件 ...

  6. 记一次 spinor flash 读速度优化

    背景 某个项目使用的介质是 spinor, 其 bootloader 需要从 flash 中加载 os. 启动速度是一个关键指标,需要深入优化.其他部分的优化暂且略过,此篇主要记录对 nor 读速度的 ...

  7. 【Linux基础总结】Linux基本环境

    Linux基本环境 对Linux的基础认识 虚拟机进入终端: [root@hadoop-senior Desktop] # 用户名 主机名 所在目录名称 #:表示当前用户属于root用户,超级管理员用 ...

  8. .net core grpc单元测试 - 服务器端

    前言 gRPC凭借其严谨的接口定义.高效的传输效率.多样的调用方式等优点,在微服务开发方面占据了一席之地.dotnet core正式支持gRPC也有一段时间了,官方文档也对如何使用gRPC进行了比较详 ...

  9. 【poj 3261】Milk Patterns 后缀数组

    Milk Patterns 题意 给出n个数字,以及一个k,求至少出现k次的最长子序列的长度 思路 和poj 1743思路差不多,二分长度,把后缀分成若干组,每组任意后缀公共前缀都>=当前二分的 ...

  10. Qt5.5 connection firebird on Linux Centos7.2 or windows

    windows c++ 项目移植到 linux,原项目需要连接 Firebird数据库. google 后知道 linux qt connection Firebird 有两种方法: 1.ibpp c ...