JS代理模式实现图片预加载
---恢复内容开始---
刚刚说了懒加载，现在我们来搞搞预加载吧
预加载的核心：
- 图片等静态资源在使用前提前请求。
- 资源后续使用可以直接从缓存中加载，提升用户体验。
几个误区： - 预加载不是为了减少页面加载时间
- 预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的
上一份代码给大家理解理解，大家可以跟着注释理解理解，一个很简单的小栗子，别忘了改图片路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
<script> //立即执行函数
var myImg = (function(){
//在页面上创建img元素
var img = document.createElement("img");
document.body.appendChild(img);
return {
setImg:function(src){
img.src = src
}
}
})()
//执行完毕后返回
// {
// setImg:function(src){
// img.src = src
// }
// }
// 一个对象 相当于 var myImg = { setImg:function(src){img.src = src}} // 代理函数 var proxyImg = (function(){
//img对象 提前加载一张图片如果给这个图片加了一个src属性后就相当于在浏览器中缓存了一张图片
var image = new Image();
image.onload = function(){
alert("加载完毕")
myImg.setImg(image.src);
}
return {
setSrc:function(src){
//loding
myImg.setImg("1.png");
//需要加载的图片
image.src = src;
}
}
})() //定义需要加载的图片路径
var src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3127448566,3364301089&fm=26&gp=0.jpg";
// 调用函数
proxyImg.setSrc(src); </script>
---恢复内容结束---
JS代理模式实现图片预加载的更多相关文章
- jquery.imgpreload.min.js插件实现页面图片预加载
页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...
- js 函数的多图片预加载(preload) 带插件版完整解析
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...
- javascript设计模式实践之代理模式--图片预加载
图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- js图片预加载与延迟加载
图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力. 图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片. 预加载 ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
- 图片预加载插件 preLoad.js
1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...
- JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载
<style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...
随机推荐
- 03-01 Java运算符
(1)算术运算符 A:+,-,*,/,%,++,-- B:+的用法 a:加法 b:正号 c:字符串连接符 C:/和%的区别 数据做除法操作的时候,/取得是商,%取得是余数 D:++和--的用法 a:他 ...
- Selenium自动化测试Python四：WebDriver封装
WebDriver 封装 欢迎阅读WebDriver封装讲义.本篇讲义将会重点介绍Selenium WebDriver API的封装的概念和方法,以及使用封装进行自动化测试的设计. WebDriver ...
- 轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单 demo
最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...
- do {...} while (0) 的用途汇总（欢迎补充）
在一些Linux内核和其它的开源代码中,我们经常看到像下面这样的代码: do{ ... }while(0) 该代码片段并非循环,这样想想似乎使用do…while没有任何意义,那么为什么还要使用它呢? ...
- Redis注意事项
1.Redis3.0没有虚拟内存概念,已从2.4就移除: 2.redis挂掉并重启时,如果有主从备份的,主机挂掉重启时先关掉主从备份,不然从机的数据会被冲洗掉 数据恢复时如果有 AOF(原理是将Rei ...
- postgresql逻辑结构--表（二）
一.创建表 语法: create table table_name( col01_name data_type, col02_name data_type, col03_name data_type, ...
- 线上问题定位--OOM
服务器上部署了Java服务,出现了OutOfMemoryError,问题应该如何定位? 解决思路 Java服务OOM,最常见的原因为: 有可能是内存分配确实过小,而正常业务使用了大量内存 某一个对象被 ...
- C++类型转化小结
之前面试就有被问过关于使用类型转换的问题,因为主要是做Windows驱动的开发,一直都是纯C语言+汇编,当时真的是只用过C语言的强制类型转换,C语言的强制类型转换(Type Cast)很简单,不管什么 ...
- 软件架构设计学习总结（18）：MVC三层架构在各框架（jsp+servlet + Struts1+ Struts2+ springMVC）中的特征
1.基于web开发中最原始的jsp+Servlet 图形化理解jsp+servlet结构: 1.从结构上分析jsp+servlet图解原理: 在基于mvc设计模式下的最原始的jsp+Servlet ...
- SpringMvc @RequestParam 使用推荐使用包装类型代替包装类型
SpringMvc 中@RequestParam注解使用 建议使用包装类型来代替基本数据类型 public String form2(@RequestParam(name="age" ...