1. <html>
  2. <title>图片预加载</title>
  3. <body>
  4. <script>
  5. //判断浏览器
  6. var Browser=new Object();
  7. Browser.userAgent=window.navigator.userAgent.toLowerCase();
  8. Browser.ie=/msie/.test(Browser.userAgent);
  9. Browser.Moz=/gecko/.test(Browser.userAgent);
  11. //判断是否加载完成
  12. function Imagess(url,imgid,callback){
  13.   var val=url;
  14.   var img=new Image();
  15.   if(Browser.ie){
  16.     img.onreadystatechange =function(){
  17.       if(img.readyState=="complete"||img.readyState=="loaded"){
  18.         callback(img,imgid);
  19.       }
  20.     }
  21.   }else if(Browser.Moz){
  22.     img.onload=function(){
  23.       if(img.complete==true){
  24.         callback(img,imgid);
  25.       }
  26.     }
  27.   }
  28.   //如果因为网络或图片的原因发生异常，则显示该图片
  29.   img.onerror=function(){img.src='http://www.baidu.com/img/baidu_logo.gif'}
  30.   img.src=val;
  31. }
  33. //显示图片
  34. function checkimg(obj,imgid){
  35. document.getElementById(imgid).src=obj.src;
  36. }
  37. //初始化需要显示的图片，并且指定显示的位置
  38. window.onload=function(){
  39.   Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img1",checkimg);
  40.   Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img2",checkimg);
  41.   Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc29485ed59.jpg","img3",checkimg);
  42.   Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-8277.jpg","img4",checkimg);
  43.   Imagess("http://blog.moonsbird.com/wp-content/uploads/2017/04/cropped-82772650889143.58dc294","img5",checkimg);
  44. }
  45. </script>
  46. <img id="img1" src="loading.gif" width="100" height="100" />
  47. <img id="img2" src="loading.gif" width="100" height="100" />
  48. <img id="img3" src="loading.gif" width="100" height="100" />
  49. <img id="img4" src="loading.gif" width="100" height="100" />
  50. <img id="img5" src="loading.gif" width="100" height="100" />
  51. </body>
  52. </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. composer+psr-4实现自动加载

    自动加载 对于库的自动加载信息,Composer 生成了一个 vendor/autoload.php 文件.你可以简单的引入这个文件,你会得到一个免费的自动加载支持. require 'vendor/ ...

  2. SAAS 何以“免费”实现盈利

    本文讲的是SAAS 何以"免费"实现盈利,[IT168 资讯]"天下没有免费的午餐",然而众多厂商却恰恰打出了免费这张王牌,且做出了不小的成绩,淘宝就凭借免费淘 ...

  3. localStorage和cookie的跨域解决方案

    原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...

  4. 2019/02/16 STL容器 ：栈

    一.栈(stack) 1.定义: 栈是一种只能在某一端插入和删除数据的特殊线性表.他按照先进先出的原则存储数据,先进的数据被压入栈底,最后进入的数据在栈顶,需要读数据的时候从栈顶开始弹出数据(最后被压 ...

  5. codeforce 1311 D. Three Integers

    In one move, you can add +1 or −1 to any of these integers (i.e. increase or decrease any number by ...

  6. Visual Studio Code 缩放设置

    Windows下的软件的操作都很类似,所以刚开始使用vs code的时候习惯性地使用Ctrl+鼠标滚轮进行缩放,然而在vs code上不管用. 在vs code中有两类缩放: 一.整体缩放:包括菜单栏 ...

  7. MySQL JDBC Driver 8.0+设置服务器时区

    遇到一个问题,线下环境测试数据的查询完全没有问题,但是线上环境却没法查询出数据,并且从mybatis输出的日志来看,查询参数也没有问题,数据库中数据也是存在的,查询参数类型是java.util.Dat ...

  8. python-文件字符分布【get()函数与.sort(key=lambda x:x[0],reverse = False)】

    文件字符分布 描述 统计附件文件的小写字母a-z的字符分布,即出现a-z字符的数量,并输出结果.‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬ ...

  9. P1191 矩形

    ------------恢复内容开始------------ 题意 给出一个\(n*n\)的矩阵,矩阵中,有些格子被染成白色,有些格子被染成黑色,现要求矩阵中白色矩形的数量 分割线 Ⅰ.暴力出奇迹!! ...

  10. java读源码 之 list源码分析（LinkedList）

    文章目录 LinkedList: 继承关系分析: 字段分析: 构造函数分析: 方法分析: LinkedList: 继承关系分析: public class LinkedList<E> ex ...