1.在云相册页面存在多张图片，一次性加载会出现页面中图片短暂白屏的问题，为了解决这个问题，使用懒加载来处理；
核心思路：使用html5中的 data-image 属性将图片的链接先绑定在元素身上，当检测到当前页的可视区域即将滚动到该元素时，将data-image注入到background-image上，在屏幕的scroll和resize事件上将该函数绑定；
核心代码如下:
//按照需求加载
var fn = function(){
$("#imagesBoxId .image_div_css").each(function(){ //遍历所有图片
var othis = $(this),//当前图片对象
var top = othis.offset().top - $(window).scrollTop();
//计算图片top-滚动条top
if (top > $(window).height()) { //如果两者之差小于屏幕高度
return; //不管
} else {
othis.css('background-image', othis.attr('data-image'));
//可见的时候把占位值替换 并删除占位属性
};
});
};
fn();
$(window).scroll(fn).resize(fn); //绑定事件
2.除了懒加载，还有预加载的思想，比如在做手机端的那种向下滑动的页面，当检测到滑动到第一屏的底端时，再去提前加载第二屏的内容，这里可以理解为是预加载；比如在hover某些图片的时候，如果没有提前加载好，会出现闪烁的问题；这些情况都需要使用预加载；
//存放图片路径的数组
var imgSrcArr = [
'imgsrc1',
'imgsrc2',
'imgsrc3',
'imgsrc4'
];
var imgWrap = [];
function preloadImg(arr) {
for(var i =0; i< arr.length ;i++) {
imgWrap[i] = new Image();
imgWrap[i].src = arr[i];
}
}
preloadImg(imgSrcArr);
3.懒加载和预加载的区别？
一个是内容后置，一个是内容前置；
