对于图片缓存加载jquery有很多插件可以使用，一行代码就能搞定，可对于移动端并且在dom操作不多的情况下用jquery未免就有点拿大炮打蚊子的赶脚了，所以自己写了个原生的，有写的的不好的和需要优化的地方希望大家不吝赐教。
首先先获取需要缓存加载图片距浏览器顶部的距离，然后把页面上所有的img的实际地址写到alt上去，src全部用一张默认通用图
function getTop(dom){ var top = dom.offsetTop; var parent = dom; while(parent = parent.offsetParent){ top += parent.offsetTop; } return top; }
定义变量记录之前滚动到哪了
var oldScrollHeight = -1;
再获取页面上所有的img
var img = document.getElementsByTagName(‘img‘);
文档初始化的时候在首屏的图片直接加载
window.onload = function () { for(var i=0;i<img.length;i++){ if(screen.availHeight >= getTop(img[i])){ img[i].src = img[i].alt; img[i].alt = ‘‘; } } };
当滚动到下面后出现在屏幕的图片再加载
window.onscroll = function(){ if(document.body.scrollTop > oldScrollHeight){ for(var i=0 ;i<img.length;i++){ if(img[i].alt && getTop(img[i]) <= (document.body.scrollTop+screen.availHeight)){ img[i].src = img[i].alt; img[i].alt = ‘‘; } } oldScrollHeight = document.body.scrollTop; } };
这样就做到图片按需加载了，对于移动端的流量可以很好的节省并且可以加快页面打开速度
原文：http://www.cnblogs.com/songsony/p/5128335.html