图片的无序预加载基础实例

最新推荐文章于 2022-03-08 22:15:40 发布

lijixuanA

最新推荐文章于 2022-03-08 22:15:40 发布

阅读量402

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lijixuanA/article/details/78792639

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

图片的预加载就是：
预知用户将发生的行为，提前进行图片的加载，达到良好的用户体验

图片预加载特点：
提前加载所需的图片

分类：1、无序的预加载
2、有序的预加载

无序加载的无预加载相册代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

</head>
<style>
    .box{
        text-align: center;
    }
    .btn{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding:0 10px;
        margin-right: 50px;
        color: #333;
    }
    .btn:hover{
        background-color: goldenrod;
    }
    a{
        text-decoration: none;
    }

</style>
<body>
  <div class="box">
    <img id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513156032276&di=7cd66ee3e71f3c92082c8ad65d4472ae&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7a899e510fb30f248a20cd2ac395d143ad4b0364.jpg"
    style="width:1200px;"/> 
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
  </div>  


  <script>
  //百度的图片
  var imgs = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513156032276&di=7cd66ee3e71f3c92082c8ad65d4472ae&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7a899e510fb30f248a20cd2ac395d143ad4b0364.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513156032276&di=6abc82260d7c943eb5b78b7b4b0fc2cc&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1509%2F01%2Fc18%2F12046816_12046816_1441117490187.jpg'
  ]

  var index = 0 ;
  var len = imgs.length;

  $('.btn').on('click', function () {
      if($(this).data('control') === 'prev') {
        Math.max(0, -- index);
      } else {
        Math.min(len - 1, ++ index)
      }
      document.title = (index + 1) + '/' + len;

      $('#img').attr('src', imgs[index]);
  })




  </script>
</body>
</html>

加上预加载之后的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

</head>
<style>
    html,
    body {
        height:100%;
    }
    .box{
        text-align: center;
    }
    .btn{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding:0 10px;
        margin-right: 50px;
        color: #333;
    }
    .btn:hover{
        background-color: goldenrod;
    }
    a{
        text-decoration: none;
    }
    .loading{
        position: fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:#eee;
        text-align: center;
        font-size: 30px; 
    }
    .progress{
        margin-top:300px;
    }

</style>
<body>

  <div class="box">
    <img id="img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513156032276&di=7cd66ee3e71f3c92082c8ad65d4472ae&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7a899e510fb30f248a20cd2ac395d143ad4b0364.jpg"
    style="width:1200px;"/> 
    <p>
        <a href="javascript:;" class="btn" data-control="prev">上一页</a>
        <a href="javascript:;" class="btn" data-control="next">下一页</a>
    </p>
  </div>  

  <div class="loading">
      <p class="progress">0%</p>
  </div>

  <script>
  var imgs = [
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513156032276&di=7cd66ee3e71f3c92082c8ad65d4472ae&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F7a899e510fb30f248a20cd2ac395d143ad4b0364.jpg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513156032276&di=6abc82260d7c943eb5b78b7b4b0fc2cc&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphotoblog%2F1509%2F01%2Fc18%2F12046816_12046816_1441117490187.jpg'  ]

  var index = 0 ;
  var len = imgs.length,
      count = 0,
      $progress = $('.progress');

//增加的代码／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／／
  $.each(imgs, function(i, src) {
    var imgObj = new Image();

    $(imgObj).on('load', function() {
        $progress.html(Math.random((count + 1) / len * 100) + '%');

        if(count >= len -1) {
            $('.loading').hide();
            document.title = '1/' + len;
        }

        count ++
    })
    imgObj.src = src;
  })
//／／／／／／／／／／／／／／／／／／／／／///／／／／

  $('.btn').on('click', function () {
      if($(this).data('control') === 'prev') {
        index = Math.max(0, -- index);
      } else {
        index = Math.min(len - 1, ++ index);
      }
      document.title = (index + 1) + '/' + len;

      $('#img').attr('src', imgs[index]);
  })




  </script>
</body>
</html>

图片无序预加载的封装函数

//封装图片无序预加载
(function ($) {
    function proLoad(img, options) {
        this.imgs = (typeof imgs === 'string') ? [imgs] : imgs;
        this.opts = $.extend({}, PreLoad.DEFAULTS, options);

        this._unoredered();
    }
    PreLoad.DEFAULTS = {
        each: null,//每张图片加载完成执行
        all: null//所有图片加载完执行
    }
    PreLoad.prototype._unoredered = function () {
        var imgs = this.imgs,
            opts = this.opts,
            count = 0,
            len = imgs.length;

        $.each(imgs, function(i, src) {
            if(typeof src != 'string') return;

            var imgObj = new Image();

            $(imgObj).on('load', function() {
                opts.each && opts.each(count);

                if(count >= len -1) {
                    opts.all && opts.all();
                }
                count ++
            })
            imgObj.src = src;
          })
    }
    $.extend({
        preload:function(imgs, opts) {
            new PreLoad(imgs, opts);
        }
    })
}(jQuery))

使用方法：

$.proload(imgs, {
    each:function (count) {
        $progress.html(Math.random((count + 1) / len * 100) + '%');
    },
    all:function () {
        $('.loading').hide();
        document.title = '1/' + len;
    }
})

lijixuanA

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片的无序预加载基础实例

图片的预加载就是：预知用户将发生的行为，提前进行图片的加载，达到良好的用户体验图片预加载特点：提前加载所需的图片分类：1、无序的预加载 2、有序的预加载无序加载的无预加载相册代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>
复制链接

扫一扫