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> 

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

  • 相关阅读:
    以&quot;小刀会“的成败论当今创业成败
    COCOS2D 学习笔记
    password加密的算法
    bzoj1087【SCOI2005】互不侵犯King
    HDU--2222--Keywords Search--AC自己主动机
    【leetcode】Subsets II (middle) ☆
    【leetcode】Word Search (middle)
    【hadoop2.6.0】利用JAVA API 实现数据上传
    【leetcode】Palindrome Partitioning II(hard) ☆
    【hadoop2.6.0】利用Hadoop的 Java API
  • 原文地址:https://www.cnblogs.com/liucai/p/2696972.html
Copyright © 2011-2022 走看看