您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版js实现滚动条滚动到页面底部继

1010cc时时彩经典版js实现滚动条滚动到页面底部继

发布时间:2019-08-17 15:20编辑:1010cc时时彩客户端浏览(151)

    使用javascript获取图片的宽度和高度的方法,为了防止因图片还没有完全载入而导致获取的数据有误的问题,这里通过 onreadystatechange 事件保证了获取的宽度,高度的数据的正确性。具体代码如下:

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处理,js处理图片主要是利用javascript中Image对象,通过 onload 事件和 onreadystatechange 来进行判断。

    这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。

    jquery获取浏览器的各种高度总结,现在才发现以前用js获取这些数据是多么的麻烦,jquery一句话就搞定了还把各浏览器的兼容性问题也给解决了。

    Jquery实现简单的滚动刷新效果:

    var image=new Image();
    image.src='http://www.lszxdnl.com/uploads/allimg/190817/1520595158-0.jpg';
    //这里也可以使用相对地址
    image.onreadystatechange=function(){
     if(image.readyState=='complete'){
      alert("通过js获取到的图片的宽度和高度分别是:" image.width '-' image.height);
     }
    }
    

    (1)第一中方法,通过onload事件,比如:

    原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据。关键是计算滚动条是否滚动到了浏览器底部,算法如下

    alert($(window).height()); //浏览器时下窗口可视区域高度
    alert($(document).height()); //浏览器时下窗口文档的高度
    alert($(document.body).height());//浏览器时下窗口文档body的高度
    alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
    alert($(window).width()); //浏览器时下窗口可视区域宽度
    alert($(document).width());//浏览器时下窗口文档对于象宽度
    alert($(document.body).width());//浏览器时下窗口文档body的高度
    alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin

    实际情况使用Ajax获取后台数据更新前端页面即可实现页面滚动刷新效果

    您可能感兴趣的文章

    • Js地址栏特效(显示页面内所有加链接的图片的大小和查看当前的浏览器的高度)
    • js判断图片是否加载完成并获取图片的宽度
    • php获取客户端电脑屏幕宽度,高度,分辨率的方法
    • 网页载入过程中自动调整图片的宽度
    • js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
    • 强大的PHP 图片处理类(水印、透明度、缩放、锐化、旋转、翻转、剪切、反色)
    • JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度
    • 图片放大展示特效slimbox 最轻量级功能最强大的Jquery图片放大特效

    onreadystatechange 事件保...

    <script type="text/javascript">
    var obj=new Image();
    obj.src="http://www.lszxdnl.com/uploads/allimg/190817/1520595158-0.jpg";
    obj.onload=function(){
     alert('图片的宽度为:' obj.width ';图片的高度为:' obj.height);
     document.getElementById("mypic").innnerHTML="<img src='" this.src "' />";
    }
    </script>
    <div id="mypic">onloading……</div>
    

    滚动条卷起来的高度 窗口高度 > 文档的总高度 50/*我这里将滚动响应区域高度取50px*/;如果这个判断为true则表示滚动条滚动到了底部。

    alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
    alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

    HTML正文:

    (2)第二种方法,使用 onreadystatechange 来判断

    实例

    您可能感兴趣的文章

    • 利用js禁止浏览器直接选择复制文章内容的办法
    • js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
    • 如何解决DIV层被Flash遮盖问题(兼容IE和火狐浏览器),如何使DIV层在FLASH上面显示
    • javascript获取图片的宽度和高度的一种方法
    • Javascript解决左右高度自适应的问题
    • php获取客户端电脑屏幕宽度,高度,分辨率的方法
    • Js地址栏特效(显示页面内所有加链接的图片的大小和查看当前的浏览器的高度)
    • CSS浏览器兼容性问题解决方法总结

    ...

    <form id="form1" runat="server">
    <div style="height: 3000px; background-color: yellow;">
    </div>
    </form>
    
    <script type="text/javascript">
    var obj=new Image();
    obj.src="http://www.lszxdnl.com/uploads/allimg/190817/1520595158-0.jpg";
    obj.onreadystatechange=function(){
     if(this.readyState=="complete"){
      alert('图片的宽度为:' obj.width ';图片的高度为:' obj.height);
      document.getElementById("mypic").innnerHTML="<img src='" this.src "' />";
     }
    }
    </script>
    <div id="mypic">onloading……</div>
    
      <style type="text/css">
      html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
       margin: 0;
       padding:0;
      }
      *{
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
      }
       .waterfllow-loading{
       z-index: 2000;
       display:none;
      }
      .waterfllow-loading.active{
       display:block;
      }
      .waterfllow-loading img.loading-progress{
       position: fixed;
       /*设置等待条水平居于窗口正中*/
       margin-left: auto;
       margin-right: auto;
       left: 0;
       right: 0;
    
       /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
       bottom: 30px;
      } 
      </style>
      <div class="waterfllow-loading">
       <img class="loading-progress" src="busy.gif">
      </div>
     <script type="text/javascript">
     //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定,使用document方式不起作用
     $(window).on('scroll',function(){
      if(scrollTop()   windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
       waterallowData();
      }
     });
    
     function waterallowData(){
      $('.waterfllow-loading').addClass('active');
    
      /*$.ajax({
       url:url,
       type:"post",
       data: params,
       success:function(data,textStatus,jQXHR){
        //添加数据
        ...
    
        //隐藏加载条
        $('.waterfllow-loading.active').removeClass('active');
       }
      });*/
     }
    

    Javascript操作代码:

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版js实现滚动条滚动到页面底部继

    关键词: