<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. Babel 在浏览器环境使用方法

    Babel 也可以用于浏览器环境.但是,从 Babel 6.0 开始,不再直接提供浏览器版本,而是要用构建工具构建出来.如果你没有或不想使用构建工具 1.通过安装5.x版本的babel-core模块获 ...

  2. 深度解析国内首个云原生数据库POLARDB的“王者荣耀”

    随着移动互联网.电子商务的高速发展,被使用最多的企业级开源数据系统MySQL面临着巨大挑战--为迎接"双11"的高并发要提前做好分库分表;用户不断激增要将读写分离才能应对每天上亿次 ...

  3. 谁需要GUI？快看Linux 终端生存之道

    完全在 Linux 终端中生存并不容易,但这绝对是可行的. 处理常见功能的最佳 Linux shell 应用 你是否曾想像过完完全全在 Linux 终端里生存?没有图形桌面,没有现代的 GUI 软件, ...

  4. usermod，用户密码管理，mkpasswd命令

    passwd是更改用户密码的文件,如果在root下,我们可以直接输入这个命令更改密码[root@localhost ~]# passwd更改用户 root 的密码 .新的 密码:如果想更改其他用户的密 ...

  5. 负载均衡服务之HAProxy https配置、四层负载均衡以及访问控制

    前文我们聊了下haproxy的访问控制ACL的配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12817773.html:今天我们来聊一聊haproxy的h ...

  6. 深度使用魅族16T后的评价（本人魅友，绝对客观公正，不要盲目的为手机厂商辩护，想想从当初到现在，魅族正在一步步背离自己的信仰,有问题，解决问题才能有更好的发展）

    缺点: 电池电量问题 发布会上,那都是吹的,真是的体验效果掉电很快,大概只有描述的2/3的使用时间 屏幕触控失灵问题 我也看了很多评价,这个也挺多的,可能是魅族品控的问题,某宝到现在没给我退货换货 发 ...

  7. 图论--最短路--dijkstra（含路径输出）模板

    #include<iostream> #include<stack> #include<queue> #include<cstring> #includ ...

  8. 《C程序设计语言》 练习1-21

    问题描述 编写程序entab,将空格串替换为最少数量的制表符和空格,但要保持单词之间的间隔不变.假设制表符终止位的位置与练习1 - 20的detab程序的情况相同.当使用一个制表符或者一个空格都可以到 ...

  9. RF（用例执行方法）

    一.执行 RF 脚本方法 1.执行整个项目下的所有用例 dos 窗口下输入 robot + 项目绝对路径 2.执行单个 Suite 中的所有用例 dos 窗口下输入 robot + 用例套件绝对路径 ...

  10. RF（读写 excel）

    1.安装 ExcelLibrary 库:pip install robotframework-ExcelLibrary 但是 Python3.0 通过上面的命令安装 ExcelLibrary 时,会发 ...