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

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

　　　　　　预加载的核心：
    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. 交换机与VLAN

    1. 交换机 1.1 定义 交换机是一种基于MAC地址识别,能完成封装转发数据帧功能的网络设备. HUB集线器是一种物理层共享设备,HUB本身不能识别MAC 地址和IP地址,当同一局域网内的A主机给B ...

  2. Spring MVC前后端数据交互总结

    控制器 作为控制器,大体的作用是作为V端的数据接收并且交给M层去处理,然后负责管理V的跳转.SpringMVC的作用不外乎就是如此,主要分为:接收表单或者请求的值,定义过滤器,跳转页面:其实就是ser ...

  3. centos7 安装cmake

    安装cmake之前,记得升级gcc,请参考centos7 升级GCC版本到7.3.0 #shell 太简单,懒得解释 wget https://cmake.org/files/v3.11/cmake- ...

  4. 重启tomcat服务操作

    1. 进入linux系统下tomcat的bin目录,比如:cd /usr/local/apache-tomcat-7.0.42/bin 2. 关闭一下tomcat服务,特别是已经启动的情况下,只不过有 ...

  5. dbvisulizer 存储过程

    --/ CREATE PROCEDURE test () BEGIN DECLARE v CHAR(10) DEFAULT 'Hello';SELECT CONCAT(v, ', ', current ...

  6. 2014.10.5 再次学习LINUX

    mesg 发送信息给root y n write/talk 写消息给 wall 给所有用户发送消息 ps -aux ps -elF pstree 命令行跳转:CTRL+a行首 CTRL+e行尾 CTR ...

  7. mpvue图片轮播遇到的问题

    小程序官方写法: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" i ...

  8. TCP滑动窗口

    TCP利用滑动窗口实现流量控制基本的数据单位不是数据段,而是字节 滑动窗口本质上是描述接受方(本地)的TCP数据报缓冲区大小的数据,发送方根据这个数据来计算自己最多能发送多长的数据.如果发送方收到接受 ...

  9. CentOS7 apache

    1.准备环境 centos7最小化安装 yum安装wget.vim.gcc.gcc-c++.cmake 2.安装apache2.4.10 官网:http://httpd.apache.org/ 下载源 ...

  10. java设计模式（详）

    http://www.runoob.com/design-pattern/design-pattern-tutorial.html