使用new Image()进行预加载
概述
这篇博文记录了用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()进行预加载的更多相关文章
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- IIS初始化(预加载),解决第一次访问慢,程序池被回收问题
你以为你可以慢,那是不可能的!你以为你可以不动,那也是不可能的! 河南是守株待兔故事情节的发源地,讲的是懒惰的农夫坐在树桩旁等待可爱的小毛兔撞树的故事,那么这种事情怎么可能天天出现呢!你以为的事并一定 ...
- FragmentPagerAdapter加载fragment并使用setUserVisibleHint()处理预加载时遇到的坑,给textview赋值时出现的空指针异常
FragmentPagerAdapter加载fragment并使用setUserVisibleHint()处理预加载时,给textview赋值时出现的空指针异常 public class BaseFr ...
- ViewPager+Fragment取消预加载(延迟加载)(转)
原文:http://www.2cto.com/kf/201501/368954.html 在项目中,都或多或少地使用的Tab布局,所以大都会用到ViewPager+Fragment,但是Fragmen ...
- js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- ASP.NET MVC3 Razor 调试与预加载
目录(?)[-] 获取服务器信息 FormsAuthenticationSlidingExpiration 属性 MVC3预加载 在ASP.NET MVC3开发中,调试中怎么也是不可缺少的,那对于 ...
- Javascript实现图片预加载【回调函数,多张图片】
使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多张图片预加载代码.当接二连三的案例中都涉及图片预加载时,就 ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
随机推荐
- Intersect交集Except差集Union并集实例
int[] oldArray = { 1, 2, 3, 4, 5 };int[] newArray = { 2, 4, 5, 7, 8, 9 };var jiaoJi = oldArray.Inter ...
- FlannBasedMatcher 立体匹配
#include "opencv2/core/core.hpp" #include "opencv2/features2d/features2d.hpp" #i ...
- 简化Getter 与 Setter 的插件 Lombok
参考文档:https://www.jianshu.com/p/365ea41b3573 第一步:添加依赖 <dependency> <groupId>org.projectlo ...
- Linux firewalld使用教程+rhce课程实验
--timeout= 设置规则生效300秒 调试阶段使用,防止规则设置错误导致无法远程连接 实验:在server0机器上部署httpd服务,通过添加富规则,只允许172.25.0.10/32访问,并且 ...
- Python+Selenium学习--自动化测试模型
前言 一个自动化测试框架就是一个集成体系,在这一体系中包含测试功能的函数库.测试数据源.测试对象识别标准,以及种可重用的模块.自动化测试框架在发展的过程中经历了几个阶段,模块驱动测试.数据驱动测试.对 ...
- 2018 宁夏省赛 F. Moving On
题目链接 https://nanti.jisuanke.com/t/28406 大意是 有n(<=200)个城市,城市间有路(Input给了邻接矩阵) 每个城市有一个危险值,然后是q(2e4) ...
- laravel简书(2)
用户注册 public function register() { //验证 $this->validate(\request(),[ ' ...
- Golang中的三个点
之前提到了把一个切片追加到另外一个切片时使用到了... 今天我们好好研究一下这三个点,博客写着写着又成了,回字有四种写法 ...第一种用法,可变长的参数 package main import &qu ...
- OSI网络七层协议+火了火了火
因为部门新进了一台价值百万的网络测试设备,所以有太大的必要了解有关网络相关的基础知识了. 网络七层协议OSI(open system interconnection)从上到下依次为:应用层.表示层.会 ...
- django by example 第五章 No module named 'sorl-thumbnail'
描述:按照原书在settings的installed apps中加入sorl-thumbnail后同步数据库显示No module named 'sorl-thumbnail' 解决方案: 根据官方文 ...