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() 中处理图片加载方法是否执行；查找并遍历需要缩放的所有图片