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

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

　　　　　　预加载的核心：
    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. flask框架1

    说flask框架之前,必须得提一下web框架,他的作用是为了利用互联网交流工作文档,我们为什么要使用框架,因为框架的稳定性和可扩展性强并且可以降低开发难度,提高开发效率.总的来说就是避免做无用功,重复 ...

  2. centOS7.10 KDE桌面字体设置推荐

    安装完centOS7.10的KDE桌面后,第一次使用觉得字体太难看了,特别是终端,看着很难受,调整多次后觉得如下设置舒服很多,分享出来以供参考. 其中等宽字 这样整体看着就会舒服很多 ******** ...

  3. oracle 用户权限相关

    --查看数据库下的所有用户: select username from dba_users; --查看当前连接数据库的用户角色 SELECT * FROM USER_ROLE_PRIVS; -- 创建 ...

  4. 剑指offer十四之链表中倒数第k个结点

    一.题目 输入一个链表,输出该链表中倒数第k个结点. 二.思路 两个指针,先让第一个指针和第二个指针都指向头结点,然后再让第一个指正走(k-1)步,到达第k个节点.然后两个指针同时往后移动,当第一个结 ...

  5. Python动态变量名定义与调用

    动态变量名赋值 在使用tkinter时需要动态生成变量,如动态生成var1...var10变量 使用exec动态赋值 exec在python3中是内置函数,它支持python代码的动态执行. 示例: ...

  6. Android众说纷纭分辨率

    Andoid最被人诟病的就是显示屏的各种不同尺寸和不同分辨率.由于Android厂商的纷繁多样,导致出现了不同尺寸和不同分辨率的手机,指示开发者需要兼容各种手机屏幕.本文想学习的就是Android的显 ...

  7. DataSet 多表关系

    protected void Page_Load(object sender, EventArgs e) { string connectionString = @"Data Source= ...

  8. 描述linux系统从开机到登陆界面的启动过程

    简述:1.开机BIOS自检2.MBR引导3.grub引导菜单4.加载内核kernel5.启动init进程6.读取inittab文件,执行rc.sysinit,rc等脚本7.启动mingetty,进入系 ...

  9. Servlet中forward和redirect的区别

    forward方式:request.getRequestDispatcher("/somePage.jsp").forwardrequest, response);      re ...

  10. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...