[原创]预加载的实现

最新推荐文章于 2024-04-05 14:25:50 发布
最新推荐文章于 2024-04-05 14:25:50 发布
阅读量2.6k 收藏
点赞数 2
文章标签： 预加载 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daxianghaoshuai/article/details/80988054
版权

简单版的预加载

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <title>Page Title</title>


    <script src="../jquery.1.10.js"></script>
</head>
<style>
    .loading{
        position: fixed;top: 0;
        left:0;
        width: 100%;
        height: 100%;
        background-color: #eee;
        text-align: center;
        font-size: 30px;
    }
    .progress{
        margin-top: 300px;
    }
    .btn.hover{
        background-color: #eee;
    }

</style>
<body>
    <div class="box">
        <img src="http://preview.quanjing.com/top034/top-924268.jpg" alt="pic" id="img" height="500">
        <p>
            <a href="#" class="btn" data-control="prev">上一页</a>
            <a href="#" class="btn" data-control="next">下一页</a>
        </p>
    </div>

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

</body>
<script>
        var imgs = [
            "http://preview.quanjing.com/top034/top-924268.jpg",
            "http://preview.quanjing.com/CPS1/152-0111.jpg",
            "http://preview.quanjing.com/bld011/bld125797.jpg",
            "http://preview.quanjing.com/east025/east-ep-a41-8167880.jpg"
        ]
        var index = 0,
            len = imgs.length,
            count = 0,
            $progress = $('.progress');

        $('.btn').on('click',function (params) {
            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]);
        })
        $.each(imgs, function (i, src) {

            var imgObj = new Image();
            $(imgObj).on('load error', function () {

                $progress.html(Math.round((count + 1) / len * 100) + "%");
                console.log("$progress  ", (count + 1) / len * 100);

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

封装成jquery插件

//---------preload.js
(function($){
    function preload(imgs, 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 img = this.imgs,
              opts = this.opts,
              count = 0,
              len = imgs.length;

          $.each(imgs, function (i, src) {
              debugger;
              if(typeof src != 'string') return;
              var imgObj = new Image();
              $(imgObj).on('load error', function () {              
                  opts.each && opts.each(count);//判断 each方法是否存在
                   if (count >= len - 1) {
                      opts.all  && opts.all();
                   }
                   count++
               });
               imgObj.src = src;
        })
    }
    $.extend({
        preload:function(imgs,opts){
            new preload(imgs,opts)
        }
    })

})(jQuery)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <script src="../jquery.1.10.js"></script>
</head>
<style>
    .loading{
        position: fixed;top: 0;
        left:0;
        width: 100%;
        height: 100%;
        background-color: #eee;
        text-align: center;
        font-size: 30px;
    }
    .progress{
        margin-top: 300px;
    }
    .btn.hover{
        background-color: #eee;
    }

</style>
<body>
    <div class="box">
        <img src="http://preview.quanjing.com/top034/top-924268.jpg" alt="pic" id="img" height="500">
        <p>
            <a href="#" class="btn" data-control="prev">上一页</a>
            <a href="#" class="btn" data-control="next">下一页</a>
        </p>
    </div>

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

</body>
<script src="./preload.js"></script>
<script>
        var imgs = [
            "http://preview.quanjing.com/top034/top-924268.jpg",
            "http://preview.quanjing.com/CPS1/152-0111.jpg",
            "http://preview.quanjing.com/bld011/bld125797.jpg",
            "http://preview.quanjing.com/east025/east-ep-a41-8167880.jpg"
        ],
        $progress = $('.progress'),
        len = imgs.length;
        $.preload(imgs,{
            each:function(count){
                console.log(count);

                $progress.html(Math.round((count + 1) / len * 100) + "%");
            },
            all:function(){
                $('.loading').hide();
                document.title = '1/' + len;
            }
        })
        var index = 0;


        $('.btn').on('click',function (params) {
            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]);
        })

</script>
</html>
27℃凉白开
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery实现图片预加载
10-23
主要介绍了jquery实现图片预加载的方法，内容很详细，带领大家全方位学习jquery图片预加载，感兴趣的小伙伴们可以参考一下
php如何实现预加载图片,JS图片预加载实例
weixin_39965673的博客
04-02 70
图片预加载2017-10-17*{padding: 0;margin: 0}img{width: 100%;display: block;} // 图片加载js代码window.Echo=(fu...
【知识点】微信小程序分包配置及预加载
程序员云阶的博客
04-05 868
小程序的代码通常是由许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会逐渐增加，体积过大就会导致用户打开速度变慢，影响用户的使用体验。分包加载是一种小程序优化技术。将小程序不同功能的代码，分别打包成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。每个分包可以包含多个页面、组件、样式和逻辑等。当小程序需要使用某个分包时，才会加载该分包中的代码。
手游实现php预加载和懒加载,懒加载和预加载的实现
weixin_35625530的博客
03-16 128
懒加载和预加载的实现提到前端性能优化中图片资源的优化,懒加载和预加载就不能不说,下面我用最简洁明了的语言说明懒加载和预加载的核心要点以及实现懒加载什么是懒加载懒加载也就是延迟加载;当访问一个页面时,先将img标签中的src链接设为同一张图片(这样就只需请求一次,俗称占位图),将其真正的图片地址存储在img标签的自定义属性中(比如data-src);当js监听到该图片元素进入可视窗口时,即将自定义属...
一种视频预加载的方案
热门推荐
欢迎关注公众号：【码农突围】，公号后台回复9999，可以获取一份500页的LeetCode刷题笔记。
01-08 1万+
前言：视频的预加载是提高用户体验的重要因素。预加载成为网络视频播放不可或缺的一个技术环节。看下Agenda: 预加载的形式 影响预加载的因素 预加载场景 一张图看清本地代理 数据预加载 效果图 HttpProxy
php预加载图片,多种js图片预加载实现方式分享_javascript技巧
weixin_39826342的博客
03-26 67
图片预加载有大体有几种方式1.html标签或css加载图片显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载。但是为了避免初次载入过多图片影响体验。一般最好在文档渲染完成以后再加载(使用window.onload等)。2.纯js实现预加载空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为function preloadi...
CSS 实现网页图片的预加载
09-25
有很多种方法来实现图片的预加载，通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧，用CSS你就可以毫不麻烦的预载你的图片。
多种js图片预加载实现方式分享
11-22
图片预加载有大体有几...空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=0 var postaction=function(){} //此处增加了一个pos
android使用RxJava实现预加载
08-31
主要为大家详细介绍了android使用RxJava实现预加载的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HP-Socket编译-Linux
05-20
HP-Socket编译-Linux
JavaScript_生活在Discord上的开源社区列表.zip
05-20
JavaScript
JavaScript_MultiOn API.zip
05-20
JavaScript
JavaScript_简单和完整的React DOM测试工具，鼓励良好的测试实践.zip
05-20
JavaScript
JavaScript_成为一个Nodejs开发者.zip
05-20
JavaScript
node-v14.5.0-headers.tar.xz
最新发布
05-20
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
android手机应用源码带文字的ProgressBar Demo源码.rar
05-20
android手机应用源码带文字的ProgressBar Demo源码.rar
JavaScript_基于Electron和Vuejs的全新跨平台Apple Music体验，从头开始编写，并考虑到性能.zip
05-20
JavaScript
海信LED32EC290N（0000）BOM1通用LED32K220（0000）BOM1生产用软件数据U盘升级文件.zip
05-20
机型：LED32K220 BOM：1 编号：LED32K220（0000）_C010 方案：MST628 版本号：LED32K220_V0000.30.20A.G0809 U盘升级说明： 就是将下载的程序解压到U盘根目录下，即根目录下有个TargetHis文件夹。 U盘采用FAT32格式，将U盘插在上面那个USB口上（若不行则更换另一个usb口）。 升级方式1： 电视开机后，插入U盘，会弹出提示是否升级，确定即可。 升级方式2： 交流开机瞬间不停的按下、松开home键，然后进入自动升级界面。 新贴片的程序第一次升级可能会在升级进度21%的界面卡住，交流断电再上电即可，继续升级。升级完成后自动启动完成即可(首次开机可能要3分钟)。 升级方式3： 插入U盘，电视上电时在串口打印界面按回车键使开机停止在boot界面，键入cu命令，然后回车即可。
recycleview实现预加载
04-26
要实现预加载功能，可以使用 RecyclerView 中的一个名叫 PagerSnapHelper 的类。PagerSnapHelper 可以让 RecyclerView 自动滚动并加载下一页数据。当用户快速滑动 RecyclerView 时，PagerSnapHelper 将会自动预加载...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值