WEB前端 图片延迟加载（lazyload）实现

前端支付宝开发视频教程|网站前端开发模板|web前端开发学习网站

核心原理是：

1 设置一个定时器，计算每张图片是否会随着滚动条的滚动，而出现在视口（也就是浏览器中的 展现网站的空白部分 ）中；

2 为<img>标签设置一个暂存图片URL的自定义属性（例如loadpic），当图片出现在视口时，再将loadpic的值赋给图片的src属性；

最后，贴出分别用原生js和jquery实现该功能的实现方法：

1 原生JavaScript的实现方法

2 jquery的实现方法

/**

• 图片的src实现原理
  */
  $(document).ready(function(){
  // 获取页面视口高度
  var viewportHeight = $(window).height();
  var lazyload = function() {
  // 获取窗口滚动条距离
  var scrollTop = $(window).scrollTop();
  $(‘img’).each(function(){
  // 判断 视口高度+滚动条距离 与 图片元素距离文档原点的高度
  var x = scrollTop + viewportHeight – $(this).position().top;
  // 如果大于0 即该元素能被浏览者看到，则将暂存于自定义属性loadpic的值赋值给真正的src
  if (x > 0)
  {
  $(this).attr(‘src’,$(this).attr(‘loadpic’));
  }
  })
  }
  // 创建定时器 “实时”计算每个元素的src是否应该被赋值
  setInterval(lazyload,100);
  });
  当然，上述代码还是很简陋，仅仅说了实现的原理，生产环境推荐使用： jquery_lazyload
  http://www.tuicool.com/articles/aMvaM3i

附插件使用地址http://code.ciaoca.com/jquery/lazyload/

网站开发前端模板|慕课网电商网站前端开发源码|网站前端开发步骤