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> 

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

  • 相关阅读:
    腾讯QQ服务器汇总表 及禁用QQ方法
    C#下一个SQL SERVER数据库操作类
    获取页面运行时间以及数据库查询次数
    GridView导出Excel
    使用FileUpload控件上传图片并自动生成缩略图、带文字和图片的水印图
    JS图片loading及放大查看效果(兼容IE,FF)
    .NET 开发人员十个必备工具
    jsp日期时间格式化输出
    MyEclipse6.5与Perforce的集成
    [转]firefox与IE的nextSibling
  • 原文地址:https://www.cnblogs.com/liucai/p/2696972.html
Copyright © 2011-2022 走看看