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. 《DSP using MATLAB》Problem 8.46

    下雨了,大风降温,一地树叶,终于进入冬季了 代码: %% ----------------------------------------------------------------------- ...

  2. jmeter接口测试(基础)

    一.jmeter创建请求 1.运行jmeter:jmeter.bat 2.右键测试计划,添加一个:线程组 3.右键前面添加的线程组,添加一个:http请求 4.填写请求信息:     5.右键线程组, ...

  3. ARM多核处理器启动过程分析

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qianlong4526888/article/details/27695173 说明: 该流程图依照 ...

  4. 2008年最佳Web设计/前端开发技巧、脚本及资源总结

    工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的 ...

  5. Spark中的各种action算子操作(java版)

    在我看来,Spark编程中的action算子的作用就像一个触发器,用来触发之前的transformation算子.transformation操作具有懒加载的特性,你定义完操作之后并不会立即加载,只有 ...

  6. (转)C++ 11 多线程--线程管理

    说到多线程编程,那么就不得不提并行和并发,多线程是实现并发(并行)的一种手段.并行是指两个或多个独立的操作同时进行.注意这里是同时进行,区别于并发,在一个时间段内执行多个操作.在单核时代,多个线程是并 ...

  7. 关于webpack一些路径

    好多新手对webpack中的路径一直感到迷茫,其实再学习webpack之前都应该去了解下nodejs的内容, 以为webpack就是个nodejs项目,所以里面涉及到的路径都是nodejs里面的写法 ...

  8. Linux sed -i 字符串替换

    sed -i 直接替换文件中的内容不输出, 如 将 laravel .env中的 QUEUE_DRIVER=sync 替换为 QUEUE_DRIVER=redis, 在Laravel的项目根目录中运行 ...

  9. fiddler突然间抓不到包了

    1.一直使用fiddler抓包,但是近几天fiddler突然间抓不到过滤地址的包了. 2.重装fiddler,未能解决. 3.设置取消浏览器的代理,未能解决. 4.关闭杀毒软件,未能解决. 5.换了火 ...

  10. js对象 事件

     对象  创建  var   myObject = {};/* 声明对象字面变量*/ 添加值myObject.name="Jener";myObject.age=25; 代码格式 ...