第一百五十七节，封装库--JavaScript，预加载图片

封装库--JavaScript，预加载图片

首先了解一个Image对象，为图片对象

Image对象

var temp_img = new Image(); //创建一个临时区域的图片对象
alert(temp_img); //[object HTMLImageElement]对象

Image对象src属性,属性值是src地址，这个src地址会在后台加载到本地缓存

var temp_img = new Image(); //创建一个临时区域的图片对象
temp_img.src = 'http://www.wallcoo.com/animal/Dogs_Summer_and_Winter/wallpapers/1920x1200/DogsB10_Lucy.jpg';

Image对象，事件

onload //事件，当图片加载成功时触发事件函数
onerror //事件，当图片加载失败时触发事件函数

如：下列

var temp_img = new Image();            //创建一个临时区域的图片对象

    temp_img.onload = function () {

        alert('图片加载成功，显示图片');

    };

    temp_img.onerror = function () {

        alert('图片加载失败，什么都不干');

    };

    temp_img.src = 'http://www.wallcoo.com/animal/Dogs_Summer_and_Winter/wallpapers/1920x1200/DogsB10_Lucy.jpg';

    //注意：最好把src，写在事件后面，否则ie不兼容

预加载图片,就是当用户查看当前图片时，提前将上一张和下一张图片加载好，当用户查看上一张或者下一张是不用等待加载，

效果图

html

<!--预加载-->

    <div id="photo">

        <dl>

            <dt><img xsrc="img/p1.jpg" yjz="img/p1big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>预加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p2.jpg" yjz="img/p2big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p3.jpg" yjz="img/p3big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p4.jpg" yjz="img/p4big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p5.jpg" yjz="img/p5big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p6.jpg" yjz="img/p6big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p7.jpg" yjz="img/p7big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p8.jpg" yjz="img/p8big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p9.jpg" yjz="img/p9big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p10.jpg" yjz="img/p10big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p11.jpg" yjz="img/p11big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

        <dl>

            <dt><img xsrc="img/p12.jpg" yjz="img/p12big.jpg" src="img/wait_load.jpg" class="wait_load" alt="" /></dt>

            <dd>延迟加载图片</dd>

        </dl>

    </div>

    <div id="photo_big">

        <h2 class="tuo"><img src="img/close.png" alt="" class="close"/>预加载图片</h2>

        <div class="big">

            <img src="img/loading.gif" alt=""/>

            <strong class="sl">&lt;</strong>

            <strong class="sr">&gt;</strong>

            <span class="left"></span>

            <span class="right"></span>

            <em class="index">22222</em>

        </div>

    </div>

css

/*预加载图片*/

#photo_big {

    width:620px;

    height:511px;

    border:1px solid #ccc;

    position:absolute;

    display:none;

    z-index:;

    background:#fff;

}

#photo_big h2 {

    height:40px;

    line-height:40px;

    text-align:center;

    font-size:14px;

    letter-spacing:1px;

    color:#666;

    background:url(img/login_header.png) repeat-x;

    margin:;

    padding:;

    border-bottom:1px solid #ccc;

    /*margin:0 0 20px 0;*/

    cursor:move;

}

#photo_big h2 img {

    float:right;

    position:relative;

    top:14px;

    right:8px;

    cursor:pointer;

}

#photo_big .big {

    width:620px;

    height:460px;

    padding:10px 0 0 0;

    background-color: #333;

}

#photo_big .big img {

    display:block;

    margin:0 auto;

    position:relative;

    top:190px;

}

#photo_big .big strong {

    display:block;

    width:100px;

    height:100px;

    line-height:100px;

    text-align:center;

    background:#000;

    opacity:;

    filter:alpha(opacity=0);

    font-size:60px;

    color:#fff;

    cursor:pointer;

    position:absolute;

    border-radius: 20px;

}

#photo_big .big strong.sl {

    top:210px;

    left:20px;

}

#photo_big .big strong.sr {

    top:210px;

    right:20px;

}

#photo_big .big span {

    display:block;

    width:300px;

    height:450px;

    background:#000;

    opacity:;

    filter:alpha(opacity=0);

    position:absolute;

    cursor:pointer;

}

#photo_big .big span.left {

    top:50px;

    left:10px;

}

#photo_big .big span.right {

    top:50px;

    right:10px;

}

#photo_big .big em {

    position:absolute;

    top:470px;

    right:20px;

    color:#fff;

    font-size:20px;

    font-style:normal;

}

前台js

//预加载图片

    //点击弹窗

    $('.wait_load').on_click(function () {

        $('#suo_ping').xian_shi().zhe_zhao_suo_ping().yi_dong_tou_ming({

            'attr': 'o',  //动画方式

            'target': 50, //目标量

            't': 50,      //每次动画时间

            'step': 5,     //跨度

            fn: function () {

                $('#suo_ping').chuang_kou_shi_jian(function () {

                    $('#suo_ping').zhe_zhao_suo_ping();

                    $('#photo_big').yuan_su_ju_zhong();

                })

            }

        });

        $('#photo_big').c_css('display', 'block').yuan_su_ju_zhong().tuo_zhuai('tuo');

        var temp_img = new Image();                           //创建临时图片对象

        $(temp_img).yuan_su_shi_jian('load',function () {     //当图片加载成功时

            $('#photo_big .big img').hq_shu_xing_zhi('src',temp_img.src).yi_dong_tou_ming({

                attr:'o',

                target:100,

                t:30,

                step:10

            }).c_css('width','600px').c_css('height','450px').c_css('top',0).shzh_tou_ming_du(0);

        });

        temp_img.src = $(this).hq_shu_xing_zhi('yjz');        //图片加载地址

        //图片鼠标划过

        //左边

        $('#photo_big .big .left').shu_biao_yi_ru_yi_chu(function () {

            $('#photo_big .big .sl').yi_dong_tou_ming({

                attr:'o',

                target:50,

                t:30,

                step:10

            });

        }, function () {

            $('#photo_big .big .sl').yi_dong_tou_ming({

                attr:'o',

                target:0,

                t:30,

                step:10

            });

        });

        //右边

        $('#photo_big .big .right').shu_biao_yi_ru_yi_chu(function () {

            $('#photo_big .big .sr').yi_dong_tou_ming({

                attr:'o',

                target:50,

                t:30,

                step:10

            });

        }, function () {

            $('#photo_big .big .sr').yi_dong_tou_ming({

                attr:'o',

                target:0,

                t:30,

                step:10

            });

        });

        //预加载设置

        var children = this.parentNode.parentNode;   //获取当前元素的父节点的父节点，也就是dl

        prev_next(children);

        //上一张

        $('#photo_big .big .left').on_click(function () {

            shang_xian(this);

            var children = $('#photo_big dl dt img').hq_jd(sh_jd_suo_yin($('#photo_big .big img').hq_shu_xing_zhi('suoy'), $('#photo').sh_jd())).parentNode.parentNode;

            prev_next(children);

        });

        //下一张

        $('#photo_big .big .right').on_click(function () {

            shang_xian(this);

            var children = $('#photo_big dl dt img').hq_jd(xia_jd_suo_yin($('#photo_big .big img').hq_shu_xing_zhi('suoy'), $('#photo').sh_jd())).parentNode.parentNode;

            prev_next(children);

        });

        //共用函数

        function shang_xian(_this) {

            $('#photo_big .big img').hq_shu_xing_zhi('src', 'img/loading.gif').c_css('width', '32px').c_css('height', '32px').c_css('top', '190px');

            var current_img = new Image();

            $(current_img).yuan_su_shi_jian('load', function () {    //当前图片加载完毕后执行

                $('#photo_big .big img').hq_shu_xing_zhi('src', current_img.src).yi_dong_tou_ming({     //从显示图片获取到索引

                    attr: 'o',

                    target: 100,

                    t: 30,

                    step: 10

                }).shzh_tou_ming_du(0).c_css('width', '600px').c_css('height', '450px').c_css('top', 0);

            });

            current_img.src = $(_this).hq_shu_xing_zhi('src');

        }

        //共用函数

        function prev_next(children) {

            var prev = sh_jd_suo_yin($(children).hq_suo_yin(), children.parentNode);   //获取当前节点的，上一个节点在父元素的索引

            var next = xia_jd_suo_yin($(children).hq_suo_yin(), children.parentNode);  //获取当前节点的，下一个节点在父元素的索引

            var prev_img = new Image();  //预加载上一张图片

            var next_img = new Image();  //预加载下一张图片

            prev_img.src = $('#photo dl dt img').guo_lv_jie_dian(prev).hq_shu_xing_zhi('yjz');  //预加载上一张图片

            next_img.src = $('#photo dl dt img').guo_lv_jie_dian(next).hq_shu_xing_zhi('yjz');  //预加载下一张图片

            $('#photo_big .big .left').hq_shu_xing_zhi('src', prev_img.src);  //将上一张地址赋值给左点击

            $('#photo_big .big .right').hq_shu_xing_zhi('src', next_img.src); //将下一张地址赋值给右点击

            $('#photo_big .big img').hq_shu_xing_zhi('suoy', $(children).hq_suo_yin()); //将当前索引赋值给显示图片

            //显示图片张数

            $('#photo_big .big .index').wen_ben(parseInt($(children).hq_suo_yin()) + 1 + '/' + $('#photo dl dt img').jd_length());

        }

    });

    //关闭弹窗

    $('#photo_big .close').on_click(function () {

        $('#photo_big').c_css('display', 'none');

        $('#suo_ping').yi_dong_tou_ming({

            'attr': 'o',  //动画方式

            'target': 0, //目标量

            't': 50,      //每次动画时间

            'step': 5     //跨度

        });

        $('#photo_big .big img').hq_shu_xing_zhi('src','img/loading.gif').c_css('width','32px').c_css('height','32px').c_css('top','190px');  //关闭弹窗后，恢复默认图片

        $('#suo_ping').jie_chu_suo_ping();

    });

首先引入封装库

第一百五十七节，封装库--JavaScript，预加载图片的更多相关文章

第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入效果图 html <div id="reg"> <h2 class="tuo"> ...
用javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
第一百二十七节，JavaScript，JSON数据类型转换，数据转换成字符串，字符串转换成数据
第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据学习要点: 1.JSON语法 2.解析和序列化前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...
第三百五十七节，Python分布式爬虫打造搜索引擎Scrapy精讲—利用开源的scrapy-redis编写分布式爬虫代码
第三百五十七节,Python分布式爬虫打造搜索引擎Scrapy精讲—利用开源的scrapy-redis编写分布式爬虫代码 scrapy-redis是一个可以scrapy结合redis搭建分布式爬虫的开 ...
第一百四十八节，封装库--JavaScript，菜单切换
第一百四十八节,封装库--JavaScript,菜单切换首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
CSS和JavaScript以及Ajax实现预加载图片的方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证效果图 html <div id="reg"> <h2 class="tuo">& ...
第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全效果图 html <div id="reg"> <h2 class ...
javascript预加载和延迟加载
延迟加载javascript,也就是页面加载完成之后再加载javascript,也叫on demand(按需)加载,一般有一下几个方法: What can your tired old page, o ...

随机推荐

java实现折半排序算法
折半插入排序法,又称二分插入排序法,是直接插入排序法的改良版,也需要执行i-1趟插入,不同之处在于,第i趟插入,先找出第i+1个元素应该插入的的位置,假定前i个数据是已经处于有序状态. 折半插入排序( ...
深入理解C#中的泛型（一）
为什么要有泛型? 请大家思考一个问题:由你来实现一个最简单的冒泡排序算法.假设没有使用泛型的经验.可能会毫不犹豫的写出下面代码: public class SortHelper { //參数为int数 ...
SQL Server 2008 R2 清空数据库中ldf日志文件
/************************************************************ * Sql Server 2008 R2 清空数据库中ldf日志文件 * 将 ...
wtforms 提示中文 flask
#! /usr/bin/python3 # -*- coding: utf8 -*- from wtforms.fields.simple import TextField, PasswordFi ...
算法笔记_051:荷兰国旗问题（Java）
目录 1 问题描述 2 解决方案 1 问题描述现有n个红白蓝三种不同颜色的小球,乱序排列在一起,请通过两两交换任意两个球,使得从左至右的球依次为红球.白球.蓝球.这个问题之所以叫荷兰国旗,是因为 ...
stylus
stylus介绍是个什么鬼?对于开发来说,CSS的弱点在于静态化.我们需要一个真正能提高开发效率的工具, LESS , SASS 都在这方面做了一些贡献. Stylus 是一个CSS的预处理框架,2 ...
js 数组去重方法汇总
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
Spring Bean的作用域类型
Bean的作用域类型 singleton :在Spring IOC容器中仅存在一个Bean实例,Bean以单实例的方式存在; prototype :每次从容器中调用Bean时,都返回一个新的实例,即每 ...
Oracle查询及删除重复数据
1.查找表中多余的重复记录,重复记录是根据单个字段(Id)来判断 ) 2.删除表中多余的重复记录,重复记录是根据单个字段(Id)来判断,只留有rowid最小的记录 ) ); 3.查找表中多余的重复记录 ...
mysql去除内容中的换行和回车
UPDATE tablename SET field = REPLACE(REPLACE(field, CHAR(10), ”), CHAR(13), ”); char(10): 换行符 char(1 ...

第一百五十七节，封装库--JavaScript，预加载图片

第一百五十七节，封装库--JavaScript，预加载图片的更多相关文章

随机推荐

热门专题