图片预加载有大体有几种方式

1.html标签或css加载图片。

  显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载(使用window.onload等)。

2.纯js实现预加载

空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为

function preloadimages(arr){
var newimages=[], loadedimages=0
var postaction=function(){} //此处增加了一个postaction函数
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost(){
loadedimages++
if (loadedimages==arr.length){
postaction(newimages) //加载完成用我们调用postaction函数并将newimages数组做为参数传递进去
}
}
for (var i=0; i<arr.length; i++){
newimages[i]=new Image()
newimages[i].src=arr[i]
newimages[i].onload=function(){
imageloadpost()
}
newimages[i].onerror=function(){
imageloadpost()
}
}
return { //此处返回一个空白对象的done方法
done:function(f){
postaction=f || postaction
}
}
}

  原理就是循环创建Image对象,并设置对象的src为指定图片,然后监听图片加载完成onload = function(){imageloadpost()},当图片加载完成后就会执行到imageloadpost。原来IE6还有一个问题:如果预加载的图片已经在内存中则不会再次出发img.onload事件。但是IE7+都没有问题了。其他浏览器也没有问题,所以上面这种img.onload监听事件已经没有兼容问题了。

3.Ajax实现预加载

  ajax请求是任何数据都可以请求的,图片也不例外。先看一下js/css预加载

    // XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');

  而图片的ajax预加载实际和纯js预加载图片一样

new Image().src = "http://domain.tld/preload.png"; 

  只不过这里的解释成了ajax加载。可以理解new Image都是ajax get请求。

  如果觉得本文不错,请点击右下方【推荐】!

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

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

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

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

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

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

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

  4. JS图片预加载插件

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

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

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

  6. js图片预加载实现!

    var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...

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

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

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

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

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

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

随机推荐

  1. CDN解决方案

    帝联cdn 这算不算是打广告呢?

  2. SQL Server2016 原生支持JSON

    SQL Server2016 原生支持JSON SQL Server 2005 开始支持 XML 数据类型,提供原生的 XML数据类型.XML 索引以及各种管理 XML 或输出 XML 格式的函数. ...

  3. 剑指Offer面试题:27.最小的k个数

    一.题目:最小的k个数 题目:输入n个整数,找出其中最小的k个数.例如输入4.5.1.6.2.7.3.8这8个数字,则最小的4个数字是1.2.3.4. 这道题是典型的TopK问题,其最简单的思路莫过于 ...

  4. 仿花田:相亲网站 意中人 已在GitHub上开源

    在园友的强烈呼唤下,我还是负责任的分享给大家,因为对代码比较熟悉一下,还是有些问题要说明,不然别人看起来会比较费劲.说实话除了这个bootstrap的界面风格和这件事情本身对大家有吸引力之外,内部的逻 ...

  5. Alljoyn瘦客户端库介绍(官方文档翻译)

    Alljoyn瘦客户端库介绍(上) 1.简介 本文档对AllJoynTM瘦客户端的核心库文件(AJTCL)进行了详尽的介绍.本文档介绍了系统整体架构,AllJoyn框架结构,并着重于介绍如何将嵌入式设 ...

  6. 基础才是重中之重~Emit动态构建方法(参数和返回值)

    回到目录 对于Emit我们知道它的可以动态构建程序集,类型,方法,属性等,或者说只要手动使用C#创建的东西使用Emit也都可以动态创建它们,Emit由于它的特别之处,所以在很多领域得到了广泛的应用,像 ...

  7. Cocos2d-x 3.x游戏开发之旅

    Cocos2d-x 3.x游戏开发之旅 钟迪龙 著   ISBN 978-7-121-24276-2 2014年10月出版 定价:79.00元 516页 16开 内容提要 <Cocos2d-x ...

  8. Linux核心源码阅读方法

    首次阅读Linux4.0.5内核源代码时,一脸茫然,它的代码不仅复杂,而且庞大,找不到从哪里开始阅读. 通常Linux会有以下目录 arch 子目录包括所有和体系结构相关的核心代码.它还有更深的子目录 ...

  9. Windows中搭建Redis集群

    从 http://rubyinstaller.org/downloads/ 下载Ruby2.2.5(x64)并安装,安装时勾选添加至路径变量中 命令行中执行gem source -a http://g ...

  10. 使用Event Message 对 Package 进行Troubleshoot

    在SSIS Server上,发现一个Package Job运行异常,该Package处于僵死状态.从 Job Activity Monitor中看到该Job一直处于运行状态,但是,DW中没有执行任何Q ...