美文网首页
图片预加载

图片预加载

作者: Alpha丶 | 来源:发表于2016-12-04 23:58 被阅读33次

本篇是解决图片预加载,做到更好的用户体验,减少数据流量。
很简单的布局和样式,仅供参看,如有不好的地方往提出:
先看很简单是css:

jj.png

JavaScript原生代码:


<script>   
 function add(){        
      var oBox=document.getElementById('box');        
      for(var i=0;i<24;i++){       //因为本地有24张图片,所以用动态创建所有的img;     
          var aImg=document.createElement('img');    //创建所有的img标签;        
          oBox.appendChild(aImg);         //把创建所以的img放到oBox里面;
      }      
}   
 window.onload=window.onscroll=function(){  //onscroll当滚动条触发时,触发该事件;     
       var aImg=document.getElementsByTagName('img');       
       if(aImg.length<24){     //这里的判断是防止一直触发add()函数;因为每次触发onscroll都会执行一下aad(),所以加了个判断;       
          add();       
       }          
      var s= document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离上边距的度;       
            for(var i=0;i<aImg.length;i++){            
                  var T=document.documentElement.clientHeight;   //可视化区域的高度;    
                  var t=aImg[i].offsetTop;  //获取每个img距离上边框距的距离;          
                  //  var l=aImg[i].offsetLeft;            
                  if(s+T>=t){            //当滚动条+可视化遇见大于了每个img的t的时候执行;    
                  aImg[i].src='../images/'+i+'.jpg'; //这里的i是我每一个img图片,是有序图片;        
                  }      
            }    
  };
</script>

html布局:

ggg.png

如有不好的地方,往给出意见;

相关文章

  • js-事件委托&图片预加载

    事件委托 图片预加载 吸顶条 图片预加载

  • 图片预加载

    背景 利用图片的预加载技术获得更好的用户体验 什么是有序预加载和无序预加载 jQuery插件的写法 图片预加载,预...

  • JS

    JS 懒加载,预加载 概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加...

  • 图片懒加载

    懒加载与预加载的基本概念。 懒加载也叫延迟加载:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预...

  • 前端图片加载优化

    预加载 图片预加载可以提高用户体验,对于图片画廊和图片占比很大的网页内容尤其重要 css预加载 利用css的bac...

  • 【JS】图片预加载--无序加载网站loading

    课程前言: 慕课网 --图片预加载 图片预加载的特点: ( 1、网站的Loading页 2、局部图片的加载--表情...

  • JavaScript--预加载与延迟加载

    JavaScript--预加载与延迟加载 1. 预加载:就是页面打开,图片什么的都加载好了(优先显示图片) 2. ...

  • 图片的预加载与懒加载

    图片预加载与懒加载 由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),...

  • 2018-07-27

    JS实现图片预加载

  • 图片预加载、瀑布流+图片预加载

    图片预加载 图片预加载是为了解决网络卡等一些其他情况造成该显示的图片不能及时的显示,但为了提高网页的完整性,给未能...

网友评论

      本文标题:图片预加载

      本文链接:https://www.haomeiwen.com/subject/rjhkmttx.html