图片预加载和懒加载demo

预加载

html>
<html>
<head>
    <title>图片无序预加载-优化title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <style>
        *{margin: 0;padding: 0}
        #box{width: 1024px;height: 500px;margin: 50px auto;}
        img{width: 1024px;height: 450px;border: 1px solid red;}
        #click{text-align: center;}
    style>
head>
<body>
<div id="box">
    <img src="" alt="">
    <div id="click">
        <a href="" id="prev">上一页a>
        <a href="" id="next">下一页a>
    div>
div>
<script src="jquery.min.js">script>
<script>
    var imgs = [
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4116894745,1605052943&fm=26&gp=0.jpg',
        'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=644449983,791694252&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225666097,3247550499&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3014020588,2537118876&fm=26&gp=0.jpg',
        'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2171490910,189745274&fm=26&gp=0.jpg',
        'https://coding.net/u/ready-/p/study/git/raw/master/img/Magnifier.png',
        'https://coding.net/u/ready-/p/study/git/raw/master/img/Magnifier.png'
    ];
    var index = 0,
        curImg = 0,
        num = 1,//预加载当前图片后num张图片..
        len = imgs.length;
    $(function () {
        $('img').attr('src',imgs[0]);
        $('a').on('click',function(){
            curindex = (this.id === 'prev') ? Math.max(0,--index) : Math.min(imgs.length-1,++index);
            $('img').attr('src',imgs[curindex]);
            load();
            return false;
        })
    })
    function load(){
        var imgObj = new Image();
        $(imgObj).on('load error',function(){
            /*if(curImg >= len){

            }else{
                load();
            }*/
            if(curImg <= index+num){
                load();
                curImg++;
            }
        })
        imgObj.src = imgs[curImg];
    }
    load();
script>
body>
html>

懒加载

下载echo地址:https://github.com/helijun/documents/tree/master/plugin/echo

html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Mr_Chentitle>
    <style>
         .demo img {
               width: 736px;
               height: 490px;
               background: url(img/1.gif) 50% no-repeat;
            }
    style>
head>
<body>
<div class="demo">
    <img class="lazy" src="img/2.gif" data-echo="img/1.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/3.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/4.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/5.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/6.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/7.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/8.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/9.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/10.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/11.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/12.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/13.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/14.png">
    <img class="lazy" src="img/2.gif" data-echo="img/15.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/16.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/17.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/18.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/19.jpeg">
    <img class="lazy" src="img/2.gif" data-echo="img/20.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/21.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/22.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/23.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/24.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/25.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/26.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/27.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/28.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/29.jpeg">
    <img class="lazy" src="img/2.gif" data-echo="img/30.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/31.jpeg">
    <img class="lazy" src="img/2.gif" data-echo="img/32.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/33.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/34.jpg">
    <img class="lazy" src="img/2.gif" data-echo="img/35.jpg">
div>
<script src="echo.js">script>

<script>

    Echo.init({
        offset: 0,//离可视区域多少像素的图片可以被加载
        throttle: 0 //图片延时多少毫秒加载
    });

script>
body>
html>

你可能感兴趣的:(面试,js)