js图片预加载和图片懒加载

预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染。
预加载是牺牲服务器前端性能,换取更好的用户体验,这样可以使用户的操作得到最快的反映。
实现预加载常用方式是:new Image()。
Image对象的src属性 : 当我们给Image对象的src属性赋值一个url的时候,这个Image对象就去会加载url资源,加载完成以后的资源被保存到浏览器的缓存文件夹里面,下次如果我们要去调用这个url地址的时候,直接是从缓存文件夹读取到的,所以速度很快。


<html>
    <head>
        <meta charset="utf-8" />
        <title>title>
    head>
    <script type="text/javascript">
        window.οnlοad=function(){
            var oImage=new Image();
            var arr=[
                'http://img7.yiihuu.com/990X524/upimg/works/2012/06/26/112417qyZ.jpg?auto=w',
                'http://img05.tooopen.com/products/20140421/86777658.jpg',
                'http://d04.res.meilishuo.net/pic/_o/68/e1/6b50f891e40dfbe88fd272c81581_570_455.c6.jpg_cef0a913_s1_q0_150_5_0_226_800.jpg',
                'http://image.tuolar.com/img/uimg/201004/17/7/ztr7r1271502487_300.jpg',
                'http://img1.touxiang.cn/uploads/20120609/09-034337_553.jpg',
                'http://img05.tooopen.com/products/20140421/61637868.jpg'
            ]

            var iCur=0;

            preLoadImg();

            function preLoadImg(){
                oImage.src=arr[iCur];

                oImage.οnlοad=function(){
                    iCur++;
                    if (iCur' / ' + arr.length;
                }

            }

            var oImg=document.getElementById("img1");
            var i=0;

            oImg.οnclick=function(){
                i++;
                if (iscript>
    <body>
        <img id="img1" src="http://img7.yiihuu.com/990X524/upimg/works/2012/06/26/112417qyZ.jpg?auto=w" />
    body>
html>

懒加载也叫延迟加载:延迟加载图片或符合某些条件时才加载某些图片。

意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数。

可视区加载实现方式:即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离便开始加载,这样能保证用户拉下时正好能看到图片。

步骤:
1、网页中的图片,都设为同一张很小的图片(src=”img/white.JPG”)。
2、给图片增加 _src=”img/1.jpg” 的属性,保存这张图片的真实地址。
3、当滚动条到达用户可视区域后,将_src的属性值赋值给src。


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            img{
                display: block;
            }
            #ul1{
                width: 808px;
                margin: 0 auto;
                list-style: none;
            }
            #ul1 li{
                float: left;
                margin: 10px;
                border: 1px solid olivedrab;
            }
            #ul1 li img{
                width: 180px;
                height: 180px;
            }

        style>
        <script type="text/javascript">
            window.οnlοad=function(){
                var oUl=document.getElementById("ul1");
                var aImg=oUl.getElementsByTagName('img');
                var iLen=aImg.length;

                showImg();
                window.οnscrοll=showImg;

                function showImg(){
                    var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

                    for (var i=0; i//!aImg[i]表示图片已经被加载过,则无需再加载
                        if ( !aImg[i].isLoad && getTop(aImg[i])'_src');
                            aImg[i].isLoad=true;
                        }
                    }
                }

                //获取obj到页面上边框的绝对距离
                function getTop(obj){
                    var iTop=0;
                    while(obj){
                        iTop+=obj.offsetTop;
                        obj=obj.offsetParent;
                    }
                    return iTop;
                }

            }
        script>
    head>
    <body>
        <ul id="ul1">
            <li><img _src="img/2.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/2.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/3.jpg" src="img/white.JPG"/>li>
            <li><img _src="img/4.jpg" src="img/white.JPG"/>li>
        ul>
    body>
html>

你可能感兴趣的:(JavaScript)