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

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

　　　　　　预加载的核心：
    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. Smart/400开发上手3: 练习实践

    练习题 在2006年1月1日之前入职且在职的营销员,给予年资补贴2000元: 符合以上条件的,再按以下标准一次性发放职级补贴: 职级代码 简称 补偿金额 A1 AD 6000 B1 SBM 5000 ...

  2. 01-01java概述 doc命令、jdk\jre下载安装、path、classpath配置、开发中常见小问题

    1:计算机概述(了解) (1)计算机 (2)计算机硬件 (3)计算机软件 系统软件:window,linux,mac 应用软件:qq,yy,飞秋 (4)软件开发(理解) 软件:是由数据和指令组成的.( ...

  3. Error: insufficient funds for gas * price + value

    有位同学今天用 web3+infura 获取 Rinkeby测试网络 的账号信息,报错如下: (node:18356) UnhandledPromiseRejectionWarning: Error: ...

  4. jieba分词(2)

    结巴分词系统中实现了两种关键词抽取法,一种是TF-IDF关键词抽取算法另一种是TextRank关键词抽取算法,它们都是无监督的算法. 以下是两种算法的使用: #-*- coding:utf-8 -*- ...

  5. 使用.NET Core与Google Optimization Tools实现员工排班计划Scheduling

    上一篇说完<Google Optimization Tools介绍>,让大家初步了解了Google Optimization Tools是一款约束求解(CP)的高效套件.那么我们用.NET ...

  6. 世界上最短的bash脚本

    世界上最短的bash脚本长这样: #!/bin/bash 为啥呢?见下图: 推荐一篇文章,讲解为啥shell脚本开头总是"#!/bin/bash".文风太清奇,不好翻译,看原文吧: ...

  7. 详解C#特性和反射（三）

    类型信息(Type Information)用来表示类型声明的信息,通过抽象基类System.Type的实例存储这些信息,当使用反射时,CLR获取指定类型的Type对象,通过这个对象即可访问该类型的任 ...

  8. Linux-(type,vim)

    type命令 1．命令格式: type [参数][命令] 2．命令功能: 使用 type 命令轻松找出给定的命令是否是别名.shell 内置命令.文件.函数或关键字.也可以找到命令的实际路径. 3．命 ...

  9. CentOS 7下搭配简单的C语言开发环境

    在CentOS 7下安装gcc,gcc是编译和运行C语言的工具, 安装命令: yum install gcc 中途如果有询问则输入y 安装成功后,通过以下命令 gcc --version 来查看安装的 ...

  10. Zend Studio下的PHP代码调试

    问题:Zend Studio无法调试php代码 安装Zend Debugger 下载 到http://downloads.zend.com/pdt/server-debugger下载最新的debugg ...