js图片加载

JavaScript019

js图片加载,第1张

原理：通过页面加载开始，先给图片一个占位图，将实际图片属性，放在自定义属性data_url里面，通过onscroll事件，检测图片的位置，如果图片进入可视区域，将data_url的实际图片设置给src

检测方法：图片距离文档顶部距离-scrollTop <浏览器可视区域高度

img.onerror=function(){}图片对象加载失败后，自动调用

img.onload=function(){}图片对象加载成功后，自动调用

这是用的  jQuery图片延迟加载插件jQuery.lazyload

首先引入文件库

<script src="jquery-1.11.0.min.js"></script>

<script src="jquery.lazyload.js?v=1.9.1"></script>

为图片加入样式lazy  图片路径引用方法用data-original

<img class="lazy" src="bit.gif" data-original="img/bmw_m1_hood.jpg">

<img class="lazy" src="bit.gif" data-original="img/bmw_m1_side.jpg">

<img class="lazy" src="bit.gif" data-original="img/viper_1.jpg">

<img class="lazy" src="bit.gif" data-original="img/viper_corner.jpg">

<img class="lazy" src="bit.gif" data-original="img/bmw_m3_gt.jpg">

<img class="lazy" src="bit.gif" data-original="img/corvette_pitstop.jpg">

js出始化lazyload并设置图片显示方式

<script type="text/javascript" charset="utf-8">

  $(function() {

      $("img.lazy").lazyload({effect: "fadeIn"})

  })

</script>