欢迎您进入公司旗下网站【达美网络】
 
周一到周五服务电话:(020) 2814 8259
 
About Hs 关于邦图
Create works 案例
All Service 服务
Web-SEO 网站推广
contact us 联系我们
了解公司信息 公司资讯 媒体新闻 邦图优势 加入邦图
what are you? 我们是邦图文化传播文化有限公司.... 首页 >媒体新闻
因为您对您的品牌和产品信心十足,而我们对网站的策略、逻辑、架构、用户体验信心十足。 现在是如何让网络上的用户了解这些的时候!我们擅长用与众不同的方式将品牌精神和产品信息传递给您想吸引的网络用户。有关产品,您是专家;互动技术,我们在行。这就是您选择邦图的理由。
 
图片的懒加载问题
2017-06-17

我们在浏览淘宝京东等大型购物网页时会经常出现许多图片而图片需要花费我们非常多的流量问题。

我们在写网页的时候怎么解决这个问题呢?这时候就要用到我们图片懒加载的问题,这样不仅可以

解决流量问题,也提高了性能等等。

下面我们就来看一下图片的懒加载怎么问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #div div{
            width: 400px;
            height: 500px;
            /*border:1px solid #000;*/
            display: inline-block;
            margin:10px;
        }
        img{
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        // 获取距离父级距离
        function getPos(obj) {
            var t=0;//先声明两个变量  用来存储距离上面的高度  距离左边的高度
            var l=0;
            while (obj){//循环判断这个元素是否存在,存在才执行这个方法
                t+=obj.offsetTop; // 加上距离父级的距离
                l+=obj.offsetLeft;
                obj=obj.offsetParent;// 有父级让他变成他的父级
            }
            return {left:l,top:t}; //把值传出去
        }

        window.onload=window.onscroll=function () {//滚动的时候和页面加载时执行的一样
            var aImg=document.getElementsByTagName('img');//获取所有的元素img元素
            var oSCrollT=document.body.scrollTop || document.documentElement.scrollTop;// 滚动条滚动高度
            var oClh=document.documentElement.clientHeight;//可视区的高度
            var oScr=oSCrollT + oClh; // 滚动条高度 + 可视区的高度
            for(var i=0;i<aImg.length;i++){ //循环所有的img,把它距离页面顶部的距离 和  滚动高度+可视区的高度进行比较
                if(oScr > getPos(aImg[i]).top){
                    aImg[i].src=aImg[i].getAttribute('_src');  //给src属性赋值
                }
            }
        }
    </script>
</head>
<body>
    <div id="div">
        <div><img _src="img/1.jpg"></div>
        <div><img _src="img/2.jpg"></div>
        <div><img _src="img/3.jpg"></div>
        <div><img _src="img/4.jpg"></div>
        <div><img _src="img/5.jpg"></div>
        <div><img _src="img/6.jpg"></div>
        <div><img _src="img/7.jpg"></div>
        <div><img _src="img/8.jpg"></div>
        <div><img _src="img/9.jpg"></div>
        <div><img _src="img/10.jpg"></div>
        <div><img _src="img/11.jpg"></div>
        <div><img _src="img/12.jpg"></div>
        <div><img _src="img/13.jpg"></div>
        <div><img _src="img/14.jpg"></div>
        <div><img _src="img/15.jpg"></div>
    </div>
</body>
</html>
今天的内容就到这里,你学会了吗?

上一条:HTML打造动画哆啦A梦 下一条:这是最后一条了哦
邦图互动(广州)总公司
广州邦图信息科技有限公司
广州市海珠区新港东路琶洲商业广场18座B塔3809
Phone:+86 137 9430 4162
广州网站建设   成都网站建设   O2O门户系统   外贸网站建设   广州网络公司   番禺网站建设深圳网站建设   网站建设   
云南网站建设     广州网站设计公司   睿思设计  昆明泽临会展   广州品牌网站设计  广州企业网站建设
广州市海珠区,欲了解业务详情,请拨打咨询热线:(广州地区:020-2814 8259)
Copyright ◎2017邦图互动,保留所有权利。粤ICP备16126083号
公司旗下网 : 达美网络  |  睿思设计  |  联系我们
◎2017Bontop Inc. All rights reserved