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> 

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

  • 相关阅读:
    Perl如何安装新模块/包
    Perl入门(二)Perl的流程控制
    Perl入门(一)Perl的基本类型及运算符
    Struts2表单数据接收方式
    Struts2 自定义拦截器时Action无法接收到参数
    深入理解Java闭包概念
    Centos 7.2 Jenkins+Ansible+Gitlab 部署maven项目
    Centos 7.2 Jenkins+Ansible+Gitlab 基础配置
    CentOS 7.2 搭建Jenkins
    Linux系统上安装配置MAVEN
  • 原文地址:https://www.cnblogs.com/liucai/p/2696972.html
Copyright © 2011-2022 走看看