<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. [软件共享]将数据库中的数据导出为SQL脚本

    可以直接将数据库中的数据导出为脚本,并可以自己设置过滤条件.使用方法很简单,不在多说了.下面是软件截图.123 下载:http://files.cnblogs.com/pw/mssql2.rar

  2. JAVA学习之路 （五） 类

    java类的学习 先上一个代码 package bankCard; import java.util.Scanner; // 银行卡类 public class bankCard { // 静态变量 ...

  3. 2016年全球IC设计大厂营收排名：高通稳居龙头

    TrendForce旗下拓墣产业研究所最新研究统计,2016年全球前十大无晶圆IC设计业者营收中,高通(QCT)仍然稳居龙头宝座.而前三大业者高通.新博通(Broadcom)与联发科合计营收占前十名营 ...

  4. 在sun jdk 8镜像基础上构建maven 3的docker镜像

    2019独角兽企业重金招聘Python工程师标准>>> 在https://my.oschina.net/ytqvip/blog/1595054文章的sun jdk 8镜像基础上构建m ...

  5. OSG程序设计之Hello World 2.0

    现在为Hello World添加一些键盘响应事件. //需要多添加两个库:osgGAd.lib.osgd.lib 代码如下: #include <osgDB/ReadFile> #incl ...

  6. centos8-django项目部署 nginx+uwsgi

    1.虚拟环境virtualenv安装 1.安装virtualenv pip3 install virtualenv 2.创建目录,把项目文件传过来 mkdir My cd My 3.创建独立运行环境- ...

  7. 大富翁 线段树+二分 +dfs

    https://csustacm.fun/problem/2033 这个题目还是比较简单的,但是比赛的时候没有像清楚,用了一个不太熟悉的数据结构主席树, 所以出现了bug,主席树的bug是真的难找. ...

  8. spring mvc从后台往前台传参数的三种方式

    第一种:使用Model对象(常用) 第一步:使用model对象往前台传递数据 第二步:在jsp中接收从后台传递过来的参数 第二种:使用HttpServletRequest对象 第一步:使用HttpSe ...

  9. Mysql数据库分页查询

    为什么使用分页查询: 数据量比较大时,如果全部查询,展示刚给用户,数据量太大,用户难以接受.并且数据量大,查询慢.如果此时将大量的数据读取到java内存中,可能会存储崩溃. 分页查询的方式: 1.全部 ...

  10. dumpsys-package

    dumpsys-package ams和pms是android系统最重要的系统服务,本文解析dumpsys package命令,看哪些PMS相关的系统信息,数据结构是运行时可以查看的. 命令提示 co ...