javascript如何实现图片预加载和懒加载功能

这篇文章主要介绍“javascript如何实现图片预加载和懒加载功能”，在日常操作中，相信很多人在javascript如何实现图片预加载和懒加载功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”javascript如何实现图片预加载和懒加载功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

JavaScript的特点

1.JavaScript主要用来向HTML页面添加交互行为。2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。

预加载

预加载是预先加载好后面需要用到的资源, 后面使用的时候直接去缓存里取。举个栗子, 比如一个网站的开场动画, 这些动画是由很多图片组成的, 假如不预先加载好, 那就会造成动画不流畅产生闪动白屏。图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，保证了图片快速、无缝地发布，使用户在浏览你网站内容时获得更好的用户体验。

//这里我把图片数量写死了，而且对图片名也有要求必须是阿拉伯数字后缀为jpg//下面注释还会介绍另一种方法,两者选一个就行，当然也可以把你的方法留在评论区共同学习function preload() {  for(var i=1;i<13;i++){    var img=[];    img[i]=new Image();//创建一个img对象    img[i].class="lazy" data-src="img/"+i+".jpg"  }}// 定义了一个函数，带一个参数funfunction addLoadEvent(fun) {  // 把已经加载完成的函数赋值给oldnload变量  var oldonload = window.onload;  if (typeof window.onload != 'function') {    window.onload = fun;  } else {    window.onload = function() {      // 这里执行了刚才赋值变量的函数      oldonload();      // 这里是执行了传进来的func参数      fun();    }  }}addLoadEvent(preload());

这里可以看到图片已经经加载出来了

懒加载

可以有效避免同一时间浏览器需要加载过多的图片，同时开启过多的http请求，导致网页加载速度变慢。

<div>  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/1.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/2.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/3.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/4.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/5.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/6.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/7.img" class="lazylode">  <img class="lazy" data-src="img/lode.img" data-class="lazy" data-src="img/8.img" class="lazylode"></div><script> var lazylode=document.querySelectorAll('.lazylode');//获取的是类数组对象，只有item（）方法和length属性没有数组对象的方法var imgArr=Array.prototype.slice.call(lazylode);//将类数组转化为数组lazylodeImg();//要执行的懒加载方法，一开始应该先执行一次懒加载，让显示区域内的图片加载出来var timer;window.addEventListener('scroll',function(){  clearTimeout(timer);//节流  timer=setTimeout(function(){    lazylodeImg();//屏幕滚动执行懒加载  },100);},false)function lazylodeImg(){  for(var i=0;i<imgArr.length;i++){    if(isVisibleArea(imgArr[i])){//判断是否在可视区域内      imgArr[i].class="lazy" data-src=imgArr[i].getAttribute('data-class="lazy" data-src');      //修改class="lazy" data-src为自定义的属性      imgArr.splice(i,1);//将数组中已加载的图片移除数组      i--;      //因为从数组中删除了下标为1的数，那么原来下标为2的数就进位为1了    }  }}function isVisibleArea(el){  var rect=el.getBoundingClientRect();  //获取元素距离可视区域的top，left等值  return rect.bottom>0 && rect.top<window.innerHeight && rect.right>0 && rect.left<window.innerHeight;  //都为真才会返回true}</script>

不光是图片，js，css文件等都可以按需加载，创建一个script或者link标签，让后在里面添加要呈现的效果，添加到body或者header里面，执行完滚动事件后js或者css文件已经加载完成，移除屏幕滚动事件。

到此，关于“javascript如何实现图片预加载和懒加载功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！