<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. Mockjs+Ajax实践

    需要完成的工作:利用mock js随机生成数据,通过ajax请求,获取这些数据并展示在网页中. 一 mock js随机生成数据 官方文档中,Mock.mock( ),可以说是mock的精髓所在. Mo ...

  2. Ubuntu 14.04 配置samba

    Ubuntu 14.04 配置samba: 安装略 # vi /etc/samba/smb.conf security = user  (在[global]下任意添加) [share] path = ...

  3. WordPress发布文章/页面时自动添加默认的自定义字段

    如果你每篇文章或页面都需要插入同一个自定义字段和值,可以考虑在WordPress发布文章/页面时,自动添加默认的自定义字段.将下面的代码添加到当前主题的 functions.php 即可: 1 2 3 ...

  4. Vue页面权限控制和动态添加路由

    原文转自:点我 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. Vu ...

  5. C++--浅谈开发系统的经验

    最近写了不少类了,从垃圾代码爬坑,虽然还是很垃圾,但是照葫芦画瓢,有几分神韵.在这里总结一下,写类的经验教训. 第一步 分析: 当拿到一个要求时,要先去考虑怎样一个类到底该实现什么样的功能,有什么样的 ...

  6. win7乱码问题解决方法（cmd变小，plsql客户端乱码）

    1.点击控制面板:时钟.语言和区域:区域和语言:管理点击更改系统区域设置,选中英语(英国):重启 2.点击控制面板:时钟.语言和区域:区域和语言:管理点击更改系统区域设置,选中中文(简体,中国):重启 ...

  7. Java——字节和字符的区别

    字节 1.bit=1  二进制数据0或1 2.byte=8bit  1个字节等于8位 存储空间的基本计量单位 3.一个英文字母=1byte=8bit 1个英文字母是1个字节,也就是8位 4.一个汉字= ...

  8. pytest文档38-allure.setp添加测试用例步骤

    前言 一般流程性的测试用例,写成自动化用例时,步骤较多写起来会比较长.在测试用例里面添加详细的步骤有助于更好的阅读,也方便报错后快速的定位到问题. 举个常见的测试场景用例:从登陆开始,到浏览商品添加购 ...

  9. 文件相关命令（find，tree，tar）文件属性信息 date

    6.13day11 文件相关命令(find,tree,tar)文件属性信息date 1 文件相关命令 1.1 find命令 查找文件用f find /root -type f -name " ...

  10. CC2530定时器

    一.定时/技术器的基本原理 定时/计数器,是一种能够对内部时钟信号或外部输入信号进行计数,当计数值达到设定要求时,向CPU提出中断处理请求,从而实现定时或者计数功能的外设.         定时/计数 ...