概述

这篇博文记录了用new Image()进行预加载的总结,供以后开发时参考,相信对其他人也有用。

旧的预加载

一般我们为了让背景图更快的加载,我们常常把背景图放在一个display:none的img标签里面进行预加载,如下面代码所示:

<div class="preload" style="display: none;">
<img src="bg1.jpg" alt="缓存">
<img src="bg2.jpg" alt="缓存">
<img src="bg3.jpg" alt="缓存">
</div>

如果bg1.jpg用在background里面,就会等到下载完css然后解析到background才会进行加载,但是如果在html里面写上了上面的代码的话,就会在加载完html并解析到上面代码的时候直接加载。

new Image()

利用上面的方法我们并不能控制图片什么时候加载,但是 如果用new Image()的话,就可以用js控制在什么时候加载图片,比如执行js的时候就加载啊,onload事件之后再加载啊,加载完页面之后2s再加载啊之类的。代码如下:

new Image().src = 'bg1.jpg';
new Image().src = 'bg2.jpg';
new Image().src = 'bg3.jpg';

加载其它资源

令人惊喜的是,利用new Image()不仅能够加载图片,还能够加载css和js,写法和上面差不多:

new Image().src = 'util.css';
new Image().src = 'haha.css';
new Image().src = 'util.js';

加载完成

如果需要的话,我们还可以加一个加载完成的事件,在加载完成的时候执行一个回调函数。如下面的代码所示:

let count = 0;
const a = new Image();
a.src = 'util.css';
const b = new Image();
b.src = 'haha.css';
const c = new Image();
c.src = 'util.js'; a.onload = function() {
count++;
} b.onload = function() {
count++;
} c.onload = function() {
count++;
}

其它

值得一提的是,new Image()的方法在FF浏览器里面会有不同的实现,如果要兼容FF的话,需要作出一些调整,具体可以参考js的new Image()做图片预加载

使用new Image()进行预加载的更多相关文章

  1. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. IIS初始化(预加载),解决第一次访问慢,程序池被回收问题

    你以为你可以慢,那是不可能的!你以为你可以不动,那也是不可能的! 河南是守株待兔故事情节的发源地,讲的是懒惰的农夫坐在树桩旁等待可爱的小毛兔撞树的故事,那么这种事情怎么可能天天出现呢!你以为的事并一定 ...

  3. FragmentPagerAdapter加载fragment并使用setUserVisibleHint()处理预加载时遇到的坑,给textview赋值时出现的空指针异常

    FragmentPagerAdapter加载fragment并使用setUserVisibleHint()处理预加载时,给textview赋值时出现的空指针异常 public class BaseFr ...

  4. ViewPager+Fragment取消预加载(延迟加载)(转)

    原文:http://www.2cto.com/kf/201501/368954.html 在项目中,都或多或少地使用的Tab布局,所以大都会用到ViewPager+Fragment,但是Fragmen ...

  5. js图片预加载

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

  6. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  7. ASP.NET MVC3 Razor 调试与预加载

    目录(?)[-] 获取服务器信息 FormsAuthenticationSlidingExpiration 属性 MVC3预加载   在ASP.NET MVC3开发中,调试中怎么也是不可缺少的,那对于 ...

  8. Javascript实现图片预加载【回调函数,多张图片】

    使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...

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

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

  10. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. sys模块的介绍

    sys.argv           命令行参数List,第一个元素是程序本身路径 sys.exit(n)        退出程序,正常退出时exit(0) sys.version        获取 ...

  2. java学习--构造方法

    构造方法的作用:创建对象并初始化对象 定义规则:构造方法名与类名相同且没有返回值.(构造方法不需要设置返回值类型,包括void) 在没有定义构造方法是,编译器会自动为类添加形如  类名 () {}  ...

  3. Linux:sudo,没有找到有效的 sudoers 资源。

    首先,这是因为用户的权限不够导致的. 使用 ls -l /etc/passwd 查看所有用户及权限.只有可读权限(r),说明用户的权限不够. 因此,我们可以用以下方法修改用户权限: 1. su roo ...

  4. html常用代码合集

    <!>字体效果 <h1>...</h1>标题字(最大) <h6>...</h6>标题字(最小) <b>...</b> ...

  5. Python代码的人机大战(循环嵌套)

    第一次动手写随笔,记录一下今早的1.5小时努力成果 题目是这样的 : 人和机器进行猜拳游戏写成一个类,首先选择角色:1 曹操 2张飞 3 刘备,然后选择的角色进行猜拳:1剪刀 2石头 3布 玩家输入一 ...

  6. java【基础】日期操作

    主要是date类,SimpleDateFormat类以及Calendar类的使用. date表示日期,simpleDateFormat 表示日期格式化,Calendar一般用来做时间的操作,比如加减天 ...

  7. AI制作icon标准参考线与多面板复制

    新建10个25x25像素,色值为RGB的画板 在视图中打开显示网格 打开首选项参考线和网格,间隔和隔线都设为1 新建一个20x20像素前景色为空描边为1像素的正方形 选择对齐选项中的对齐画板,使之与画 ...

  8. CPU与IRP的一些相关函数

    VOID KiAdjustIrpCredits ( VOID )其中 Number = KeNumberProcessors;Prcb = KiProcessorBlock[Index]; 多核情况下 ...

  9. Django Model模型的实战操作笔记

    Model模型的实战操作笔记 1. 创建数据库和表 进入MySQL数据库创建数据库:mytest 进入数据库创建数据表:mytest_users CREATE TABLE `mytest_users` ...

  10. SQL SERVER中LIKE在Char和nChar输出结果不一致解惑

    一同事在写脚本时,遇到一个关于LIKE里面使用不同的变量类型导致查询结果不一致的问题,因为这个问题被不同的人问过好几次,索性总结一下,免得每次都要解释一遍,直接丢一篇博客岂不是更方便!其实看似有点让人 ...