前端图片的性能优化

https://www.cnblogs.com/vipzhou/p/6519552.html

1、实现图片的预加载

   (1)用background 这样只需加载一遍

  （2）

推迟预加载时间
function preloader(){
　　if(document.getElementById){
　　　　document.getElementById("preload").style.background='url(http://gfdhgf)'
　　}
}

function addLoadEvent(func){
　　var oldonload = window.onload;
　　if(typeof window.onload != 'function'){}
}

function addLoadEvent(func) {
　　var oldonload = window.onload;
　　if (typeof window.onload != 'function') {
　　　　window.onload = func;
　　} else {
　　window.onload = function() {
　　if (oldonload) {
　　　　oldonload();
　　}
　　func();
　　}
　　}
}
addLoadEvent(preloader);

 

2、实现图片的懒加载

　　原理：在滚动到底部的时候，把data-src里的值，取出来放到src里

　　var aImg = document.querySelectorAll('img');
　　var len = aImg.length;
　　var n = 0;//存储图片加载到的位置，避免每次都从第一张图片开始遍历
　　window.onscroll = function() {
　　var seeHeight = document.documentElement.clientHeight;
　　var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　for (var i = n; i < len; i++) {
　　if (aImg[i].offsetTop < seeHeight + scrollTop) {
　　if (aImg[i].getAttribute('src') == '') {
　　/*(function(i){ //立刻执行函数
　　　　setTimeout(function (){
　　　　aImg[i].src = aImg[i].getAttribute('guoyu-src');
　　　},1000);
　　})(i);*/
　　aImg[i].src = aImg[i].getAttribute('guoyu-src');
　　}
　　n = i + 1;
　　console.log('n = ' + n);
　　}
　　}
};

 

3、先用压缩图面，后面用高清图片替换 

　　$(function(){
　　　　//一段正则，匹配所有_min.的图片src属性
　　　　var test = /_min\./
　　　　//遍历所有的图片节点
　　　　$("img").each(function(index,obj){
　　　　　　if(test.test($(this).attr("src"))){
　　　　　　var reSrc = $(this).attr("src").replace(test,".");
　　　　　　$(this).attr("src",reSrc)
　　　　}
　　　})
　　})

4、话说  还有个什么base64 的  大图片不适合用  具体原理也没看

 

5、判断图片的后缀

https://www.cnblogs.com/ding0910/archive/2010/05/03/340695.html