zoukankan      html  css  js  c++  java
  • 图片懒加载原生写法。

    HTML

    <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" />
            <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" />
            <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg" alt="" />
            <img _src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg" alt="" />
            <img _src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg" alt="" />

    说白了就是一大堆图片

    给个样式

    img {
                    width: 300px;
                    height: 300px;
                    float: left;
                    margin: 10px;
                    border: #000 1px solid;
                }

    最后是重点

    JS

    function getPos(obj) {
                    var l = 0;
                    var t = 0;
                    console.log(obj)
                    while(obj) {
                        l += obj.offsetLeft; //元素距左窗口距离
                        t += obj.offsetTop; //元素距上窗口距离
                        obj = obj.offsetParent; //返回元素的有定位属性的父节点
                    }
                    return {
                        left: l,
                        top: t
                    };
                }
                window.onload = window.onscroll = window.onresize = function() {
                    var aImg = document.getElementsByTagName('img');
                    var oScroll = document.documentElement.scrollTop || document.body.scrollTop;
                    var clientH = document.documentElement.clientHeight;
                    for(var i = 0; i < aImg.length; i++) {
                        var imgTop = getPos(aImg[i]).top;
                        if(oScroll + clientH >= imgTop) {
                            aImg[i].src = aImg[i].getAttribute('_src');
                        }
                    }
                }

    这样就大功告成了

  • 相关阅读:
    cron表达式详解(转载)
    Swagger 3.0使用教程(转载)
    springboot整合shiro-对密码进行MD5并加盐处理(十五)(转载)
    redis排序
    引用和指针的区别?
    测试策略
    主键、外键的作用,索引的优点与不足?
    您所熟悉的软件测试类型都有哪些?请试着分别比较这些不同的测试类型的区别与联系(如功能测试、性能测试……)
    UI测试测什么
    数据库,数据库管理系统,数据库系统三者的区别和练习?
  • 原文地址:https://www.cnblogs.com/UniverseWang/p/7227296.html
Copyright © 2011-2022 走看看