【前端】图片预加载与懒加载

最新推荐文章于 2024-07-13 19:52:17 发布

林毅洋

最新推荐文章于 2024-07-13 19:52:17 发布

阅读量431

点赞数

分类专栏： HTML 文章标签：图片预加载懒加载

本文链接：https://blog.csdn.net/kajweb/article/details/99669991

版权

HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

图片预加载与懒加载

图片预加载

图片预加载就是图片提前加载，可以保证图片快速、无缝的发布，用户需要查看时可直接从本地缓存中渲染。

图片预加载的实现方法有很多，可以通过css、JavaScript、Ajax等方法实现。

CSS方法

通过background加载图片，但是设置定位在窗口可见区域外（使其不可见）

/*CSS - preLoad Image*/
#preload-01 { background: url(image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(image-02.png) no-repeat -9999px -9999px; }

JavaScript

通过newImage = new Image()、newImage.src="imageSrc"实现

function preLoadImage( images ){
	let isArray = images instanceof Array;
	if( isArray ){
		let preLoad = [];
		for(let i=0,l=images.length;i<l;i++){
			preLoad[i] = new Image();
			preLoad[i].src = images[i];
		}
		return true;
	} else if( typeof(images) == 'string' ) {
		let preLoad = new Image();
		preLoad.src = images;
		return true;
	} else {
		throw new TypeError("parma must be Array or string");
		return false;
	}
}

在实际操作中，需要对图片加载增加加载成功或者加载失败的提示，往往需要通过Image.onload()、Image.onerror()进行监听。

Ajax

Ajax预加载图片是使用了XMLHttpRequest()对象，对图片进行预加载。

// 封装方法参考上面new Image();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'xxx.jpg');
xhr.send();

图片懒加载

实现图片懒加载的关键是监听滚动条，判断图片在窗口中的位置。或者使用getBoundingClientRect()获得元素的大小及其相对于视口的位置。

图片懒加载需要记住加载条件：

div.offsetTop < 网页被卷去的高 + 网页可见区域高

// 图片懒加载1（未完善）
function lazyLoad( className="lazy-img", loadOkClassName="lazy-img-ok" ){
  	// 遍历获取对象
    let lazyImg = document.getElementsByClassName( className );
    for( let i=0;i<lazyImg.length;i++ ){
      	// 跳过已经加载的图像
      	if( lazyImg[i].getAttribute(loadOkClassName) == "true" )
          	continue;
      	// 获得滚动条高度
        let pageYOffset = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      	// 获得页面可见高度
        let offsetHeight = document.body.offsetHeight;
      	// 获得图片距上层控件的高度
        let imgOffsetTop = lazyImg[i].offsetTop;
      	// 判断图片是否在页面中可见
        if( imgOffsetTop < pageYOffset + offsetHeight ){
          	// 改变图片的URL
            // lazyImg[i].src = lazyImg[i].getAttribute("data-src");
            lazyImg[i].src = lazyImg[i].dataset.src;
          	// 增加加载成功的标志
            lazyImg[i].setAttribute(loadOkClassName,"true");
        }
    }
}

window.onscroll = function(){
  	lazyLoad();
}