图片预加载

背景

利用图片的预加载技术获得更好的用户体验

什么是有序预加载和无序预加载

jQuery插件的写法

图片预加载,预知用户将要发生的行为,提前加载用户所需的图片

网站loading页

image.png

局部图片的加载

图片相册之结构和样式

无序加载,有序加载

image.png

图片预加载: 分类: 1:无序加载 2:有序加载

清除下滑线:text-decoration:none;

data-control属性 href="javascript:;"空链接

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片加载之无序加载</title>
    <style>
      .box {
        text-align: center;
        margin-top: 20px;
      }
      .box .btn {
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding: 0 10px;
        margin-right: 50px;
        color: #333;
      }
      .box .btn:hover {
        background-color: #eee;
      }
      .box a {
        text-decoration: none;
      }
      .box img {
        height: 80vh;
        width: 90vw;
      }
      .loading {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #eee;
        text-align: center;
        font-size: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <!--内容展示区域-->
    <div class="box">
      <img id="img" src="" alt="" title="" />
      <p>
        <a href="javascript:void(0);" class="btn" data-control="prev">上一页</a>
        <a href="javascript:void(0);" class="btn" data-control="nex">下一页</a>
      </p>
    </div>
    <!--内容加载页区域-->
    <div class="loading">
      <p class="progress">0%</p>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/index2-4.js"></script>
    <script>
      // 定义一个图片数组
      var imgs = [
        'https://github.com///blob/master/ProImages/ImgPreloading01.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading02.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading03.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading04.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading05.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading06.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading07.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading08.jpg?raw=true',
        'https://github.com///blob/master/ProImages/ImgPreloading09.jpg?raw=true',
        'https://github.com//blob/master/ProImages/ImgPreloading10.jpg?raw=true'
      ];
      // 获取图片数组的长度
      var index = 0;
      var len = imgs.length;
      var $progress = $('.progress');

      // 调用插件
      $.preload(imgs, {
        // 实现遍历的功能
        each: function(count) {
          $progress.html(Math.round((count + 1) / len * 100) + '%');
        },
        // 实现隐藏遮罩层的功能
        all: function() {
          $('.loading').hide();
        }
      })
      // 定义点击事件
      $('.btn').on('click', function() {
        if('prev' === $(this).data('control')) {
          index = Math.max(0, --index);
        } else {
          index = Math.min(len - 1, ++index)
        }
        document.title = (index + 1) + '/' + len;
        $("#img").attr('src', imgs[index]);
      })
      // 为初始页面赋值
      document.title = (index + 1) + '/' + len;
      $("#img").attr('src', imgs[index]);
    </script>
  </body>
</html>

image.png

load();
// 有序预加载
function load() {
 var imgObj = new Image();
 $(imgObj).on('load error', function () {
  if(count >= len) {
  // 所有图片已经加载完毕
  }else{
  load();
  }
  count++;
});
imgObj.src=imgs[count];
}

图片加载preload.js

(function ($) {
 function PreLoad(imgs, options) {
  this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
  this.opts = $.extend({}, PreLoad.DEFAULTS, options);
  
  if (this.opts.order === 'ordered') {
   this._ordered();
 } else {
   this._unoredered();
 }
}
PreLoad.DEFAULTS = {
 order: 'unordered', // 无序预加载
 each: null, // 每一张图片加载完毕后执行
 all: null // 所有图片加载完毕后执行
};
PreLoad.prototype._ordered = function () { // 有序加载
 var opts = this.opts,
 imgs = this.imgs,
 len = imgs.length,
 count = 0;

load();
// 有序预加载
function load() {
 var imgObj = new Image();
 $(imgObj).on('load error', function () {
 opts.each && opts.each(count);
  if(count >= len) {
  // 所有图片已经加载完毕
  opts.all && opts.all();
  }else{
  load();
  }
  count++;
});
imgObj.src=imgs[count];
}

},
PreLoad.prototype._unoreddered = function () { // 无序加载
 var imgs = this.imgs,
 opt = this.opts,
 count = 0,
 len = img.length;
 $.each(imgs, function(i, src) {
  if(typeof src != 'string') return;
  var imgObj = new Image();

图片的预加载:

var  imgObj = new Image();

$(imgObj).on('load error', function() {

});

imgObj.src= src;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android核心技术Intent和数据存储篇

    Intent是各个组件之间用来进行通信的,Intent的翻译为“意图”的意思,是传输数据的核心对象,它可以开启一个activity,也可以发送广播消息和开启Se...

    达达前端
  • 微信小程序电影实战

    查询影院热映,推荐电影,查询电影和查看电影详情功能 涉及内容: 网络通信,豆瓣电影接口,模板,网页引用,js封装引用,wxss引用,text,image,s...

    达达前端
  • 前端技术前沿4

    Github:https://github.com/Meituan-Dianping/mpvue

    达达前端
  • sql_mode之only_full_group_by

    今天上班的时候,业务方问了我这样一个问题:能不能把线上的sql_mode值改为和测试环境一致?因为我们在测试环境上写的sql在线上可能会出错,原因是线上...

    AsiaYe
  • 一个外包小公司干掉了一个国企的故事,发人深省!

    随着互联网+口号和政策的推动,很多企业,尤其是传统企业都在转型,也越来越认识到互联网的重要性,都在想办法如何切入互联网领域,无论是切入互联网是为了分一杯羹,还是...

    一墨编程学习
  • 爬虫入门到精通-headers的详细讲解(模拟登录知乎)

    本文章属于爬虫入门到精通系统教程第七讲 直接开始案例吧。 本次我们实现如何模拟登陆知乎。 1.抓包 1. 首先打开知乎登录页 知乎 - 与世界分享你的知识、经验...

    爬虫
  • 算法提高 01背包

    问题描述   给定N个物品,每个物品有一个重量W和一个价值V.你有一个能装M重量的背包.问怎么装使得所装价值最大.每个物品只有一个. 输入格式   ...

    AI那点小事
  • 排序子序列

    牛牛定义排序子序列为一个数组中一段连续的子序列,并且这段子序列是非递增或者非递减排序的。牛牛有一个长度为n的整数数组A,他现在有一个任务是把数组A分为若干段排序...

    AI那点小事
  • 单元测试没价值? 大师 VS. 码农

    “做一件事前要先思考这件事有没有價值,再決定要不要做?” 这样的一段話,这样的思維,是許多开发人员, 拿来拒绝做单元测试的最佳武器。 但,真正的問题是…...

    Ken Fang 方俊贤
  • 运维必备技能 WEB 日志分析

    文章节选自《Netkiller Monitoring 手札》 20.2. Web 20.2.1. Apache Log 1、查看当天有多少个IP访问: awk ...

    netkiller old

扫码关注云+社区

领取腾讯云代金券