html点击重新载入图片,移动端图片等比缩放适应屏幕，及图片懒加载、图片加载失败后点击重新加载...

先说一下整体思路

图片链接存储在data-lazy中，当img移动到屏幕可视区域后，触发loadImg()，将data-lazy赋值给img的src属性。从而加载图片。

HTML

实现方式如下

先监听屏幕的滚动事件调用throttle()

window.onscroll = throttle(checkImgs());

throttle()是一个节流操作，让高频连续触发的事件每隔一定的时间长度之后再做出响应。是有规律的时间间隔去执行。arguments、apply()

throttle(fn, mustRun = 500) {

var timer = null;

let previous = null;

return function() {

var now = new Date();

var context = this;

var args = arguments;

!previous ? previous = now : '';

var remaining = now - previous;

if (mustRun && remaining >= mustRun) {

fn.apply(context, args);

previous = now;

}

}

}

checkImgs() 中处理图片加载方法是否执行；查找并遍历需要缩放的所有图片，获取每个图片的实际宽度去与屏幕宽度做比较，若大于屏幕宽度则按图片的实际宽高比缩小图片，若小于屏幕宽度则居中。

checkImgs() {

var imgs = document.querySelectorAll('.image');

for (let i = this.imgIndex; i < imgs.length; i++) {

//图片等比缩放为视屏屏幕宽度

var screenWidth = document.getElementsByClassName('text')[0].clientWidth; //图片最大宽度

var imgWidth = parseFloat(imgs[i].style.width); //图片实际宽度

var imgHeight = parseFloat(imgs[i].style.height); //图片实际高度

var aspectRatio = imgWidth/imgHeight; //图片宽高比

if(imgWidth>=screenWidth){ //图片宽度大于等于屏幕宽度

imgs[i].style.width=screenWidth+'px';

imgs[i].style.height=screenWidth/aspectRatio+'px';

}else{ //图片宽度小于屏幕宽度居中

imgs[i].style.margin="0 auto";

}

//调用图片加载

this.isInSight(imgs[i])?(this.loadImg(imgs[i]),this.imgIndex = i):'';

}

}

isInSight(el)判断图片是否在屏幕区域内。若返回true则触发loadImg()加载图片getBoundingClientRect()用法

isInSight(el) {

var bound = el.getBoundingClientRect(); //获取元素在页面位置

var clientHeight = window.innerHeight; //获取窗口高度

return bound.top <= clientHeight;

}

loadImg()加载图片，从img的data属性中提取图片地址，并赋值给img标签的src，进而触发图片的onload方法。

图片加载成功不予考虑，若加载失败的处理为：

1.在图片的onerror函数中创建div,用于在图片加载失败后替换img标签。内容为点击重新加载

2.给此div添加点击事件，隐藏div并为img的src属性重新赋值，进而触发图片重新加载。若图片加载继续失败，则重新显示div。

loadImg(el) {

var origin = window.location.origin+window.location.pathname;

if (el.src == origin) {

var source = el.dataset.lazy;

el.src = source;

//图片加载失败

el.οnerrοr=function(){

var newItem=document.createElement('DIV');

newItem.className = 'errorImg';

newItem.innerHTML='请点击重新加载图片';

newItem.style.cssText="color:#666666;"+"width:"+el.clientWidth+"px;"+"height:"+el.clientHeight+"px;"+"line-height:"+el.clientHeight+"px;"

var parent = el.parentNode;

parent.lastChild == el ? parent.appendChild(newItem) : parent.insertBefore(newItem,el.nextSibling);

// 加载失败后重新点击

newItem.οnclick=function(){

// el.src=source;

el.src=el.dataset.lazy; //重新为img的src属性赋值

newItem.style.display='none';

el.style.display='block';

el.οnerrοr=function(){

newItem.style.display='block';

el.style.display='none';

};

}

el.style.display='none';

newItem.style.display='block';

}

}

}