做粘土的网站/google下载官网

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-滚动条topif (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.懒加载和预加载的区别？

  一个是内容后置，一个是内容前置；