图片预加载

wanghui 发布于2019-08-23 18:20 / 1930人阅读

摘要：第二个框框内是要预加载的图第一次切换还是发了请求第二次切换，正常没有请求默认情况下状态码为的响应可以被缓存。方法二把预加载的挂载到上最好结果火狐谷歌表现一致，都切换较快，没有发请求背景图片的预加载不做任何处理结果第一次请求返回。

/**
 * 预加载
 * @param {Array} dataList  预加载数据
 * @param {Array} attrArray 预加载属性，可选
 */
export function  preLoad(dataList,attrList){
  //若有指定对象属性
  let imgList = [];
  if(attrList){
    dataList.forEach(element => {
      attrList.forEach(attr=>{
        if(element[attr]){
          const img = new Image();
          img.src = element[attr];
          imgList.push(img);

        } 
      })
    });
  }else{
    dataList.forEach(element => { 
      const img = new Image();
      img.src = element;
      imgList.push(img);       
    });
  }
  
  return imgList;
}

测试浏览器：chrome、firefox

在Firefox下并没有from memory cache以及from disk cache的状态展现相同的资源在chrome下是from
disk/memory cache，但是Firefox统统是304状态码
即Firefox下会缓存资源，但是每次都会请求服务器对比当前缓存是否更改，chrome不请求服务器，直接拿过来用

200 OK (from disk cache) 是浏览器没有跟服务器确认，就是它直接用浏览器缓存。 304
是浏览器和服务器确认了一次缓存有效性，再用的缓存。客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有修改过，则不需要返回全量的数据。能够节省大量的网络带宽，并减少了页面的渲染时间。

图片img的预加载 方法一:直接用src进行预加载,但不保存

 
 mounted() {  
     preLoad(this.data,["imagePath"]);
}

结果：

谷歌切换图片速度快，确实有预加载. 初次 200 disk cache

切换没有发XHR，发了Img。200 OK (from disk cache) 是浏览器没有跟服务器确认，即直接用浏览器缓存。

火狐切换图片速度慢，并没有预加载初次，没有“已缓存”标识。第二个框框内是要预加载的图

第一次切换,还是发了请求

第二次切换，正常没有请求（默认情况下状态码为200的响应可以被缓存）。
所以火狐预加载并没有成功。

方法二：把预加载的挂载到data上（最好）

结果：火狐、谷歌表现一致，都切换较快，没有发请求


mounted() {    
    this.preLoadImg = preLoad(this.data,["bgimagePath"]);
}
methods: {
    changeActive(index) {
      this.current = index;
      let dom = this.$refs["solution-img"];
      if(dom.childNodes.length > 0) dom.removeChild(dom.childNodes[0]);
      dom.appendChild(this.preLoadImg[index]);
    }

  },

背景图片的预加载

不做任何处理结果：第一次请求返回200。第一次加载后都是304

方法一：使用css预加载

#preload-01 { background:  url("~@/assets/img/market/icon-00.png") no-repeat -9999px -9999px; }    
#preload-02 { background:  url("~@/assets/img/market/icon-01.png") no-repeat -9999px -9999px; }

结果：和不处理表现一致。初次加载也没有请求这些图片。

方法二：src预加载，但不保存

{
 background-image: url("~@/assets/img/market/icon-10.png")  ;       
 &:hover{  background-image:url("~@/assets/img/market/icon-11.png")}
}
myPreLoad(){
      let images = [  
        require("@/assets/img/market/icon-10.png"),
        require("@/assets/img/market/icon-11.png"),
      ];
      preLoad(images);

}

结果：第一次hover 状态码304。之后切换没有发请求。火狐和谷歌表现一致，都是304

方法三：把预加载的挂载到data上

handleMouseenter(index){
this.getDom(index).style.backgroundImage = "url(" +this.preLoadImage[index*2+1].src + ")";

},

结果：谷歌切换没有发请求。但是火狐会发请求，并返回304。

方法四：雪碧图（最好）

.backgroud-box{
  width: 137px ;
  height: 113px;
  background-image: url("./icon-1.png") ;    
  background-position-x:100%;
  background-position-y:0;
}
              
&:hover>.backgroud-box { background-position-y:-113px;}

以上方法都会出现切换背景图片闪烁。用这个方法位移背景就不会。而且第一次加载就把图片下载下来了，切换也不会发请求，因为用的是同一张图

个人结论

1、因为

在Firefox下并没有from memory cache以及from disk cache的状态展现。 相同的资源在chrome下是from
disk/memory cache，但是Firefox统统是304状态码

所以火狐下每次操作到src或者url都要发出请求。

2、刚好标签是一个Image对象，可以直接插入html，所以可以保存在data上缓存。304请求虽然也是可以缩短渲染时间，但是直接保存在data上可以免去一次请求，响应时间更快。

3、背景图片涉及到改变url，所以没办法直接用保存在data上的数据。

云服务器服务器托管图片预加载 JS图片预加载 js实现图片预加载预加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105068.html

Javascript实现图片的预加载功能

摘要：本文同步自我得博客最近要用做一个动画功能，为了确保动画在播放的时候能够顺利和平滑，我需要对所用到的图片素材进行预加载，下面跟大家分享一下我实现这个功能的过程单图片预加载目前最常见的一种实现方式如下接下来可以使用图片了接下来可以使用图片了首先本文同步自我得博客：http://www.joeray61.com 最近要用javascript做一个动画功能，为了确保动画在播放的时候能够顺利和...

KavenFan 2019-08-21 10:19 评论0 收藏0
图片的预加载和懒加载

摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个...

SwordFly 2019-08-21 10:37 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

appetizerio 2019-08-29 16:57 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

Shonim 2019-08-02 11:41 评论0 收藏0
懒加载和预加载

摘要：使用默认是对象，如果是是指使用标签，可以跨域，三懒加载和预加载的对比两者都是提高页面性能有效的办法，两者主要区别是一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。一、懒加载 1.什么是懒加载 showImg(https://segmentfault.com/img/remote/1460000016666819); 懒加载也...

hedzr 2019-08-23 12:19 评论0 收藏0