JQ图片预加载(无序加载and有序加载)

最新推荐文章于 2024-08-27 22:36:25 发布
最新推荐文章于 2024-08-27 22:36:25 发布
阅读量1.7k 收藏 2
点赞数 1
分类专栏： jQuery 文章标签： 图片预加载 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_19327991/article/details/72625851
版权
本文介绍了使用jQuery实现图片的无序和有序预加载方法，包括非插件写法和插件写法。无序加载不显示百分比进度，而有序加载则提供了进度显示。所有预加载方案共享同一个JS文件，提高了代码复用性。
摘要由CSDN通过智能技术生成

无序加载效果预览：

这里写图片描述

有序加载只是少了百分比显示效果一样

无序加载非插件写法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片加载之无序加载</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            #img{
                width: 100%;
            }
            .box{
                width: 1200px;
                margin: 30px auto;
            }
            p{
                text-align: center;
                margin-top: 15px;
            }
            .btn{
                text-decoration: none;
                color: #000000;
                border: 1px solid #ccc;
                padding: 3px 8px;   
                margin-right: 20px;     
            }
            .loading{
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #CCCCCC;
                text-align: center;
                font-size: 30px;
            }
            .progress{
                margin-top: 300px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../img/1.jpg" alt="pic" id="img" />
            <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 type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            //声明一直数组，并在数组内放置图片路径
            var imgs = [
                "../img/1.jpg",
                "../img/2.jpg",
                "../img/3.jpg",
                "../img/4.jpg",
                "../img/5.jpg",
                "../img/6.jpg"
            ];

            //获取数组长度，进度元素，设置页数，进度初始值
            var index = 0,
                len = imgs.length,
                count = 0,
                $progress = $(".progress");

                //遍历数组，获取数组内全部路径
                $.each(imgs, function(i,src) {

                    //声明一个图像对象
                    var imgObj = new Image();

                    //设置所有图片在加载中或者加载失败时触发时间
                    $(imgObj).on("load error",function(){

                        //设置进度显示数字（因为each会自动循环 每次都会用获得数组数量除以总数从而获得百分比）
                        $progress.html(Math.round((count + 1) / len * 100) + "%");

                        //如果循环次数等于数组长度 即代表全部图片加载完毕
                        if(count >= len - 1){

                            //图片全部加载完毕后隐藏百分比进度
                            $(".loading").hide();

                            //设置页面标题初始值
                            document.title = "1/" + len;
                        }

                        //每一次循环加1
                        count++;
                    });

                    //设置所有图片的路径等于数组内的路径
                    imgObj.src = src;
                });

                //设置上一张下一张触发事件
                $(".btn").on("click",function(){
                    if("prev" === $(this).data("control")){

                        //上一张index变量先-1再和0比较大小
                        index = Math.max(0,--index);

                        //可以选择三元或者上面的写法处理
//                      index = (--index<=0)?0:--index;
                    }else{

                        //下一张index变量先+1再和0比较大小
                        index = Math.min(len - 1, ++index);
                    }

                    //设置页面标题页数
                    document.title = (index + 1) + "/" + len;

                    //设置每一次点击获取对应图片路径
                    $("#img").attr("src",imgs[index]);
                });
        </script>
    </body>
</html>

有序加载非插件写法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片加载之无序加载</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #img{
                width: 100%;
            }
            .box{
                width: 1200px;
                margin: 30px auto;
            }
            p{
                text-align: center;
                margin-top: 15px;
            }
            .btn{
                text-decoration: none;
                color: #000000;
                border: 1px solid #ccc;
                padding: 3px 8px;   
                margin-right: 20px; 
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../img/1.jpg" alt="pic" id="img" />
            <p>
                <a href="javascript:;" class="btn" data-control="prev">上一张</a>
                <a href="javascript:;" class="btn" data-control="next">下一张</a>
            </p>
        </div>

        <script type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js2.js"></script>
        <script type="text/javascript">
            //声明一直数组，并在数组内放置图片路径
            var imgs = [
                "../img/1.jpg",
                "../img/2.jpg",
                "../img/3.jpg",
                "../img/4.jpg",
                "../img/5.jpg",
                "../img/6.jpg"
            ];

            //获取数组长度，进度元素，设置页数
            var len = imgs.length,
                count = 0,
                index = 0;

                load();

                //有序预加载
                function load(){
                    var imgObj = new Image();

                    $(imgObj).on("load error",function(){
                        if(count >= len){
                            //所有图片已经加载完毕
                        }else{
                            load();
                        }

                        count++;
                    });

                    imgObj.src = imgs[count];
                }


                //设置上一张下一张触发事件
                $(".btn").on("click",function(){
                    if("prev" === $(this).data("control")){

                        //上一张index变量先-1再和0比较大小
                        index = Math.max(0,--index);

                        //可以选择三元或者上面的写法处理
//                      index = (--index<=0)?0:--index;
                    }else{

                        //下一张index变量先+1再和0比较大小
                        index = Math.min(len - 1, ++index);
                    }

                    //设置页面标题页数
                    document.title = (index + 1) + "/" + len;

                    //设置每一次点击获取对应图片路径
                    $("#img").attr("src",imgs[index]);
                });
        </script>       
    </body>
</html>

无序加载插件写法：（和有序加载调用共同JS文件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片加载之无序加载</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
            }
            #img{
                width: 100%;
            }
            .box{
                width: 1200px;
                margin: 30px auto;
            }
            p{
                text-align: center;
                margin-top: 15px;
            }
            .btn{
                text-decoration: none;
                color: #000000;
                border: 1px solid #ccc;
                padding: 3px 8px;   
                margin-right: 20px; 
            }
            .loading{
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: #CCCCCC;
                text-align: center;
                font-size: 30px;
            }
            .progress{
                margin-top: 300px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../img/1.jpg" alt="pic" id="img" />
            <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 type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js2.js"></script>
        <script type="text/javascript">
            //声明一直数组，并在数组内放置图片路径
            var imgs = [
                "../img/1.jpg",
                "../img/2.jpg",
                "../img/3.jpg",
                "../img/4.jpg",
                "../img/5.jpg",
                "../img/6.jpg"
            ];

            //获取数组长度，进度元素，设置页数
            var index = 0,
                len = imgs.length,
                $progress = $(".progress");

                //使用工具函数 调用插件方法
                $.preload(imgs,{

                    //每一张图片加载完毕后执行
                    each: function(count){
                        $progress.html(Math.round((count + 1) / len * 100) + "%");
                    },

                    //所有图片加载完毕后执行
                    all: function(){
                        //图片全部加载完毕后隐藏百分比进度
                        $(".loading").hide();

                        //设置页面标题初始值
                        document.title = "1/" + len;
                    }
                });

                //设置上一张下一张触发事件
                $(".btn").on("click",function(){
                    if("prev" === $(this).data("control")){

                        //上一张index变量先-1再和0比较大小
                        index = Math.max(0,--index);

                        //可以选择三元或者上面的写法处理
//                      index = (--index<=0)?0:--index;
                    }else{

                        //下一张index变量先+1再和0比较大小
                        index = Math.min(len - 1, ++index);
                    }

                    //设置页面标题页数
                    document.title = (index + 1) + "/" + len;

                    //设置每一次点击获取对应图片路径
                    $("#img").attr("src",imgs[index]);
                });
        </script>       
    </body>
</html>

有序加载插件写法：（和无序加载调用共同JS文件）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片加载之无序加载</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #img{
                width: 100%;
            }
            .box{
                width: 1200px;
                margin: 30px auto;
            }
            p{
                text-align: center;
                margin-top: 15px;
            }
            .btn{
                text-decoration: none;
                color: #000000;
                border: 1px solid #ccc;
                padding: 3px 8px;   
                margin-right: 20px; 
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="../img/1.jpg" alt="pic" id="img" />
            <p>
                <a href="javascript:;" class="btn" data-control="prev">上一张</a>
                <a href="javascript:;" class="btn" data-control="next">下一张</a>
            </p>
        </div>

        <script type="text/javascript" src="../jq/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js2.js"></script>
        <script type="text/javascript">
            //声明一直数组，并在数组内放置图片路径
            var imgs = [
                "../img/1.jpg",
                "../img/2.jpg",
                "../img/3.jpg",
                "../img/4.jpg",
                "../img/5.jpg",
                "../img/6.jpg"
            ];

            //获取数组长度，设置页数
            var len = imgs.length,
                index = 0;

                //调用插件
                $.preload(imgs,{

                    //使用有序加载
                    order: "ordered"
                });

                //设置上一张下一张触发事件
                $(".btn").on("click",function(){
                    if("prev" === $(this).data("control")){

                        //上一张index变量先-1再和0比较大小
                        index = Math.max(0,--index);

                        //可以选择三元或者上面的写法处理
//                      index = (--index<=0)?0:--index;
                    }else{

                        //下一张index变量先+1再和0比较大小
                        index = Math.min(len - 1, ++index);
                    }

                    //设置页面标题页数
                    document.title = (index + 1) + "/" + len;

                    //设置每一次点击获取对应图片路径
                    $("#img").attr("src",imgs[index]);
                });
        </script>       
    </body>
</html>

有序and无序加载共同JS文件

//图片预加载
(function(){

    //imgs一般传递进来的都是一个数组
    function PreLoad(imgs,options){

        //如果imgs传递进来的是一个字符串 就将他包装成一个数组 否则就返回数组本身
        this.imgs = (typeof imgs === "string") ? [imgs] : imgs;

        //将options参数覆盖PreLoad.DEFAULTS，将融合后的内容组成一个新对象，并返回到参数中
        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(){

            //实例化IMG对象
            var imgObj = new Image();

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

                //检测opts.each是否存在
                opts.each && opts.each(count);

                if(count >= len){
                    //所有图片已经加载完毕
                    opts.all && opts.all();
                }else{
                    load();
                }

                count++;
            });

            //将图像路径保存的数组数据全部设置到IMG的 src中
            imgObj.src = imgs[count];
        }   
    }

    //无序加载
    PreLoad.prototype._unoredered = function(){

        //获取对象中的imgs属性（因为前面已经设置了返回的是数组，所以可以遍历其内容）
        var imgs = this.imgs,

            //获取对象中的opts属性，并返回到变量中
            opts = this.opts,

            //设置百分比显示数字执行的参数 和 获取数组长度（可浏览图片数量）
            count = 0,
            len = imgs.length;

        //遍历数组，获取数组内全部路径
        $.each(imgs, function(i,src) {

            //判断src传递进来的是否是一个字符串 如果是 就将他返回 下面的代码将不执行
            if(typeof src != "string") return;

            //声明一个图像对象
            var imgObj = new Image();

            //设置所有图片在加载中或者加载失败时触发时间
            $(imgObj).on("load error",function(){

                //检测opts.each属性是否存在
                opts.each && opts.each(count);

                //如果循环次数等于数组长度 即代表全部图片加载完毕
                if(count >= len - 1){

                    //图片全部加载完毕后隐藏百分比进度
                    $(".loading").hide();

                    //设置页面标题初始值
                    document.title = "1/" + len;
                }

                //每一次循环加1
                count++;
            });

            //设置所有图片的路径等于数组内的路径
            imgObj.src = src;
        });     
    };

    //将PreLoad构造函数实例化
    $.extend({
        preload: function(imgs,opts){
            new PreLoad(imgs,opts);
        }
    });

})(jQuery);
豆i浆
关注
专栏目录
基于jq实现图片预加载功能
阿虾搞搞的博客
03-31 586
一、什么是预加载？ 预加载是一种web性能优化技术，在页面加载之前，对部分资源进行提前加载，以提供给用户更好的体验，提高用户在浏览资源过程的流畅感。 二、预加载的实现 本次实验依赖jq实现 首先看一下预加载实现的效果 提前对页面中未显示的图片资源进行加载，当用户在浏览到相应的图片资源时直接从浏览器缓存中渲染在页面上。 首先，我们使用立即执行函数，以闭包的方式，实现局部变量，避免内部变量与外部...
Preload图片预加载（jQuery插件）
前端向朔
04-30 7199
背景 我们在做页面的时候，从用户体验的角度出发，肯定是希望用户以最快的速度看到完整的页面信息，但在实际情况中经常会遇到些问题。 比如受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 或者页面素材比较多、比较大，需要一定的加载时间，特别有时候的活动页面，我们一般会把首屏做的更多多样化或者传达比较丰富的氛围的时候，我们的首屏素材上都会比较大，有时候也会给元素加上动画来传达信...
jq图片预加载
04-16
tempImg.src属性可以在后台加载这张图片到本地缓存实现预加载
jq实现图片预加载
weixin_41421227的博客
03-23 1036
&lt;style type="text/css"&gt; body{margin: 0px; padding: 0px;} .dd{border: 0px solid red; height: 800px;} #pics{width: 90%; margin: 0px auto;} #pics dl{width: 32%; float: left; margin-left: 1%...
前端性能优化-图片的预加载和懒加载
最新发布
weixin_43279210的博客
08-27 1134
在说到对图片资源进行优化时，那就不得不提到图片预加载和图片懒加载，可能很多朋友都了解这两者，但是一直没有很清晰的概念，以及什么时候用，用在什么场景下，今天就来详细的了解一下吧！
jQuery进行图片预先加载
.
07-11 2140
/** **将图片加载到内存中，在页面任何位置引用的时候，直接从缓存中读取，提升用户的体验，提高网站的流畅度。** **/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
jQuery插件之图片预加载
Freya_yyy的博客
04-21 464
背景： 图片是web页面的重要组成部分，也是前端页面优化的重要内容。当用户访问一个比较庞大的页面时，若相关资源没有提前加载，可能会展示给用户一片空白，从而导致用户流失等；再比如受网速的影响，资源加载时间较长，可能使得页面出现错乱等问题。因此预加载就显得很有必要，同时预先加载的页面可以在用户需要时，直接从本地缓存中渲染，减少用户的等待时长。 图片优化--------预先加载； 提升用户体验效果...
100多个JQuery效果示例（实例）div+css+javascrpit
04-09
87. 分享多款jQuery图片预加载切换效果(上下滚动、淡入淡出渐变等) 88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果...
前端基础之Html、CSS、JavaScript、JQuery、Ajax
pybstudyjava的博客
03-29 1847
前端 1.HTML XML：可扩展标记语言 XHTML：可扩展的超文本标记语言 1. HTML 概述 HTML：超文本标记语言 网页组成：文字 + 图片 + 表格 + 表单 + 链接 + 视频 + 音频 网页文件的格式：htm ，html 网页的注释：<!-- 注释的内容 --> html 结构 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
DIV+CSS学习笔记总结篇
qianduan666a的博客
07-29 914
DIV+CSS学习笔记总结篇 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位： web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望： 未来IT行业企业需求最多的人才 结合最新的html5抢占移动端的市场 自己创业做老板 随着互联网的普及web开发成为企业的宠儿和核心 web职业发展目标： 第一、梳理知识架构 负责内容的HTML 负责外观的css（层叠样式表） 负责行为
HTML5标签-按功能分类整理
weixin_42517088的博客
05-04 647
html标签分类HTML主体结构标签<head>标签中常用的标签<body>标签中常用的标签排版标签文本标签列表标签图片标签超链接标签多媒体标签表单相关标签HTML全局属性HTML框架标签 按标签的的功能分类 说明：主要用于表示html代码的整体结构关系，或可理解为用于搭建出网页的基本层次结构。 HTML主体结构标签 ```html <!--文档级结构标签--> <!DOCTYPE html> <!--声明头--> <html>
jquery 预加载图片
04-04
NULL 博文链接：https://chen-miao.iteye.com/blog/1496730
jquery实现图片预加载技术，使得图片加载更为流畅，和谐。
10-15
通过图片预加载技术，使得图片加载更为流畅，和谐。当图片的大小比较大时，图片也可以自动调整宽度和高度，同时图片也能居中。
jquery.LoadImage图片预加载.zip
07-04
jquery.LoadImage图片预加载是一款一款实用简单的图片预加载效果，支持loading小图片，完全不需要在html让做任何改变即可实现。
JQ 图片懒加载
04-24
NULL 博文链接：https://onestopweb.iteye.com/blog/2345212
jQuery 实现图片的依次加载图片功能
10-19
本文分为css和js代码两部分给大家详细介绍了jQuery 实现图片的依次加载图片功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
jquery 实现图片预加载
罗小文
04-06 1695
<script type="text/javascript"> // 预加载 function preloadImg(list, imgs) { var def = $.Deferred(), len = list.length; $(list).each(function(i, e) { var img = new Image(); img.src = e; if (img.complete) { imgs[i] = img; len--;
分享一个jQuery的图片预加载插件 - QueryLoader2
GBin1.com
12-24 855
日期：2011/12/23  来源：GBin1.com   在线演示  本地下载 分享一个jQuery的预加载插件，这个插件通过检查页面中的所有元素来提前加载所有包含的图片（包括背景图片），这个版本的插件是原来版本的一个更新，更容易使用。 Queryloader目前需要jQuery1.7，并且支持IE>7, Chrome, Safari和Firefox。   来源：分
【原生JS】图片预加载之无序预加载
dizhengshao3220的博客
05-12 123
图片预加载之无序预加载 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>PreLoading</title> <style> *{margin:...
提高网页速度：详解jQuery lazyload.js 延迟加载图片与优化策略
然而，随着浏览器性能的提升，现代浏览器即使在没有脚本控制时也会预加载某些图片。这导致了原版lazyload.js插件在某些情况下可能无法达到预期的缓加载效果。为了解决这个问题，官方推荐的方法是直接修改HTML结构，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值