zoukankan      html  css  js  c++  java
  • 关于图片延迟的一点思路

    第一张图片直接加载

    <div class="imgleft "> 
    <img src="http://images.cnblogs.com/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <img src="http://images.cnblogs.com/grey.gif" original="/images/newyl_21.jpg" class="lazyImg" width="1032" height="309"  alt="名信系列">

    <div>

    <script type="text/javascript">

    //限定加载范围 从第2张开始到第12张 结束 
    var index_n=1;
    x=0;
    $(document).ready(function(){
    $(window).scroll(function() {

    x++;
    if(x%3==0){
    // 滚动高度超过3次,加载图片
    $(".imgleft img:eq("+index_n+")").each(function(){
    $(this).attr("src",$(this).attr("original"));
    });
    index_n++
    }

    //限定加载范围 从第2张开始到第12张 结束 

    if(index_n==13){
    $(window).unbind("scroll");
    return;
    }
    });
    });

    </script> 

    //不知道鼠标滚动发送的次数是否一样  所以可能有的鼠标会不兼容  欢迎拍砖

  • 相关阅读:
    poj 1035 字符串匹配
    拓扑排序的小总结
    POJ1018
    POJ1328详细题解
    POJ1159题解报告
    POJ1088 (滑雪)
    树状树组区间修改,单点修改模板
    spfa模板
    树状树组离散化求逆序对模板
    POJ3723(最小生成树,负权)
  • 原文地址:https://www.cnblogs.com/liucai/p/2696972.html
Copyright © 2011-2022 走看看