var myImage = (function(){
  var imgNode = document.createElement( 'img' );
  document.body.appendChild( imgNode );
    return {
      setSrc: function( src ){
       imgNode.src = src;
      }
    }
})();
var proxyImage = (function(){
  var img = new Image;
  img.onload = function(){
    myImage.setSrc( this.src );
  }
return {
  setSrc: function( src ){
    myImage.setSrc( 'file:// /C:/Users/svenzeng/Desktop/loading.gif' );
    img.src = src;
  }
}
})();
proxyImage.setSrc( 'http:// imgcache.qq.com/music/photo/k/000GGDys0yA0Nk.jpg' );

  

js图片预加载实现!的更多相关文章

  1. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  2. js图片预加载与延迟加载

    图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片.​ 预加载 ...

  3. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  4. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

  5. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  6. js图片预加载、有序加载

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  7. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  8. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

  9. 图片预加载 js css预加载

    图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden">        <script type= ...

随机推荐

  1. Python: 比较两个字典是否相等

    有些情况下会遇到比较两个字典是否相等的问题 直观来想,会比较键是否一致,其对应的值是否相等 python中,还有有另外两种方法: 直接使用== a = {'a': 1, 'b': 2} b = {'a ...

  2. 关于ctype.h头文件使用说明

    ctype.h里的函数概况: 1.字符测试函数 (1)函数原型均为 int isXXX( int ch) (2)参数为int,任何参数均被转换为整形 (3)只能处理[0,127]之间的值 2.字符映射 ...

  3. 收藏的链接-English

    What is the adverb for deposit? https://www.wordhippo.com/what-is/the-adverb-for/deposit.html

  4. 【POJ】2236 Wireless Network

    题目链接:http://poj.org/problem?id=2236 题意:给你n台计算机的坐标.d是可通信的最大距离.有两个操作. 1.O p 表示修复计算机p. 2.S p q表示询问pq是否能 ...

  5. log4j学习(二) 高并发logback

    logback中常用的appender有ch.qos.logback.core.ConsoleAppender和ch.qos.logback.core.rolling.RollingFileAppen ...

  6. IOS中iframe的滚动条不启作用

    引自:https://www.cnblogs.com/weinan/archive/2013/01/05/2832800.html 问题描述: iframe设置了高度(例如500px).倘若ifram ...

  7. Python|读、写Excel文件(三种模块三种方式)

    python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...

  8. The linux command 之引用

    [me@linuxbox ~]$ echo this is a test this is a test shell 会对echo进行单词分割(word splitting)去除多余的空白. [me@l ...

  9. PHP微信公众号支付弹出“NaN:undefined”解决方法

    最近研究php微信支付开发,从微信官方下载了微信支付的demo后,测试时总是弹出NaN:Undefined这样的错误提示.不过这个并不影响支付的操作,支付成功后依然可以正常获取到支付状态,并进行跳转. ...

  10. Tomcat - 基本知识

    基本概念 Tomcat是接收和解析http请求,并将结果返回客户端的应用程序 轻量级的web应用服务器 适用于并发性不是很高的系统中 开发和调试jsp的首选 类似的应用程序:Jetty, JBoss/ ...