---恢复内容开始---

　　刚刚说了懒加载，现在我们来搞搞预加载吧

　　　　　　预加载的核心：
    1. 图片等静态资源在使用前提前请求。
    2. 资源后续使用可以直接从缓存中加载，提升用户体验。
      几个误区：
    3. 预加载不是为了减少页面加载时间
    4. 预加载只是提前加载除去首轮加载的图片以后要用到的图片，比如通过点击等事件才会用到的

　　　　上一份代码给大家理解理解，大家可以跟着注释理解理解，一个很简单的小栗子，别忘了改图片路径

　　　　

<!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代理模式实现图片预加载的更多相关文章

  1. jquery.imgpreload.min.js插件实现页面图片预加载

    页面分享地址: http://wenku.baidu.com/link?url=_-G8miwbgDmEj6miyFtjit1duJggBCJmFjR2jky_G1VftD9eS9kwGOlFWAOR ...

  2. js 函数的多图片预加载(preload) 带插件版完整解析

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片预加载效果 本篇文章写的 ...

  3. javascript设计模式实践之代理模式--图片预加载

    图片的预加载就是在加载大图片前,先显示一个loading.gif,就算在网络比较慢的时候也能让人知道正在加载,总比啥反应都没有强. 下面这段代码就是预加载的一个简单的实现,假设先不处理加载图片时的on ...

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

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

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

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

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

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

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

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

  8. 图片预加载插件 preLoad.js

    1.preLoad.js插件 /*! * preLoad.js v1.0 * (c) 2017 Meng Fangui * Released under the MIT License. */ (fu ...

  9. JS学习笔记 - fgm练习 2-11- 改变图片路径 var img = new Image(); 图片预加载

    <style> *{ margin: 0;padding: 0; list-style: none; } body{ background: black; } .outer{ margin ...

随机推荐

  1. MVC3学习：基于ObjectContext的数据增删改查操作

    数据库里面的表格,映射为对应的实体类.实体类的编写,可以自己手动编写,也可以使用工具或插件自动生成.在MVC3里面,我们可以使用VS的POCO插件自动生成实体类.如下图: 关于POCO插件的安装与使用 ...

  2. STL简洁 && c++读取cfg文件

    在c++工程中,往往需要修改一些变量来实现不同的功能效果,这是cfg文件的使用可以使得工程更加高效与便利,这篇文章介绍的就是c++读取cfg文件的相关内容,以便及时总结和日后回顾. STL即标准模板库 ...

  3. C# 多线程学习系列一

    一.Windows线程的由来  关于操作系统的一些知识 (1).单个"工作线程"的问题 早期的Windows没有线程的概念,整个系统只有一个"工作线程",上面同 ...

  4. mysql基础知识（3）

    十六.组合查询 使用 union 来组合查询,如果第一个查询返回M行,第二个查询返回N行,那么组合查询的结果一般为 M+N 行. 注意:每个查询必须包含相同的行.表达式的聚集函数:默认会去除相同行.表 ...

  5. Qt中QMenu的菜单关闭处理方法

    Qt中qmenu的实现三四千行... 当初有个特殊的需求, 要求菜单的周边带几个像素的阴影, 琢磨了半天, 用QMenu做不来, 就干脆自己用窗口写一个 然而怎么让菜单消失却非常麻烦 1. 点击菜单项 ...

  6. 一对一Socket简单聊天的实现

    今天终于调试通了Socket一对一的聊天,每次发送连接请求后,将用户名发送到Socket中去,然后将用户名和新建的socket存到map中,然后根据用户名来确定接收方是谁,以实现一对一的聊天功能. 上 ...

  7. StreamSets学习系列之StreamSets的集群安装（图文详解）

    不多说,直接上干货! 若是集群安装 需要在对应节点执行相同的操作. 见 StreamSets学习系列之StreamSets支持多种安装方式[Core Tarball.Cloudera Parcel . ...

  8. spring security的简单应用

    本文只包涵spring security配置部分,不是一个完整项目,不过可以任意添加到一个web项目中,不需要对原来的程序做任何修改 部分内容来源于网络,如有雷同,毫无意外 1.xml配置文件 < ...

  9. es-08-hadoop集成

    1, 版本匹配: https://www.elastic.co/guide/en/elasticsearch/hadoop/current/requirements.html 2, maven集成: ...

  10. java开发细节问题，spring的单例模式，多线程同步问题

    1.对象的赋值,new一个对象,然后在传递给函数赋值,往往这对对象赋值就可以使用了 2.对于 spring开发的细节问题 Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这 ...