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');
                        }
                    }
                }

    这样就大功告成了

  • 相关阅读:
    PHP7革新与性能优化
    git团队开发
    PHP获取机器mac代码
    js复制文字
    jquery datatable客户端分页保持
    自已编写C# DLL 绑定到unity进程进行单步调试
    ‘xxfile' Missing the class attribute 'ExtensionOfNativeClass'
    关于热更的杂记
    关于unityengine.dll, unityengine.coremodule.dll
    学到了关于服务器磁盘阵列
  • 原文地址:https://www.cnblogs.com/UniverseWang/p/7227296.html
Copyright © 2011-2022 走看看