zoukankan      html  css  js  c++  java
  • 图片延迟加载

    在做一个图片较多的网站中,如果一次性加载全部图片难免网站打开速度有点慢,所以 嘿  ~ 嘿 ~ 嘿~

    <script type="text/javascript">
    (function($){
    var queue = [];var queueMap = [];var coordinate = {};var n = 0;lazyLoder = {
    push:push,
    load:load,
    clear:clear,
    show:show
    }
    function show(){
    alert(queueMap);
    alert(queueMap.length);
    alert(queue.length);
    }
    function push(img){
    $(img).attr("sid")?$(img).attr("sid"):$(img).attr("sid",n++);
    var id = $(img).attr("sid");
    if(!queueMap[id]){
    queue.push(img);
    queueMap[id] = id;
    }
    }
    function load(){
    if(queue.length==0){return}
    computeCoodinate();
    var temp = [];

    for (var i = 0; i < queue.length ;i++ ){
    if($(queue[i]).attr("isOK")==1){
    temp.push(i);
    continue;
    }
    if(check(queue[i])==true){
    loadIMG(queue[i]);
    temp.push(i);
    $(queue[i]).attr("isOK",1);
    }
    }
    while(temp.length>0){
    queue.splice(temp.pop(),1);
    }
    }
    function clear(){
    queue.length=0;
    }
    /*private function*/
    function computeCoodinate(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
    coordinate.down = scrollTop > (coordinate.top?coordinate.top:0);
    coordinate.up = scrollTop < (coordinate.top?coordinate.top:0);

    coordinate.top = scrollTop;
    coordinate.bottom = scrollTop + windowHeight;
    }
    function check(target){
    var offset = $(target).offset();
    var height = $(target).height();
    var flag = true;
    flag = flag && (offset.top>coordinate.top);
    flag = flag && (offset.top < coordinate.bottom);
    if (flag == false){
    flag = flag && ((offset.top+height) > coordinate.top);
    flag = flag && ((offset.top+height) < coordinate.bottom);
    }
    return flag;
    }
    function loadIMG(img){
    setTimeout(function(){
    $(img).attr("src",$(img).attr("lazy"));
    },1);
    }

    })($)
    var lazyloadImgID = setInterval(function(){
    $("img[lazy]").each(function(){
    lazyLoder.push(this)
    });
    lazyLoder.load();
    },1);
    $(document).ready(function(){
    clearInterval(lazyloadImgID);
    $("img[lazy]").each(function(){
    lazyLoder.push(this);
    });
    lazyLoder.load();
    $(window).bind("scroll",lazyLoder.load).bind("resize",lazyLoder.load);
    });
    </script>
  • 相关阅读:
    使用EFCore连接现有数据库
    C#面试题总结
    xamarin学习--发布apk安装包
    xamarin学习--导航参数注意事项
    centos8 安装 gitlab
    mvc添加全局过滤器
    Windows平台查看端口占用情况
    asp.net core cli---创建一个不启用https的项目
    asp.net core cli
    启动nuxt项目报错WARN node unsupported "node@v8.9.3" is incompatible with chalk@^4.1.0, expec...
  • 原文地址:https://www.cnblogs.com/zhpblog/p/6955372.html
Copyright © 2011-2022 走看看