Lazy Load延遲加載圖片效果

      前些日子自己想搞個延時加載的玩玩，但js自己是不會寫的，只有上網找插件了。在網上找了好多，都比較坑爹！為什么呢？大部分文章都是他妹的一篇不停的轉載，這地方省一點那地方省一點。你說你轉載就算了，保留原出處鏈接也行啊，這樣也方便大家可以有更大的收獲。但事實上是什么樣子，我也就不多說了，我相信上網查過資料的親都有過感受。在網上找了好久，最終還是有收獲的。自己弄了幾個小時后，終於折騰出來了。下面獻上自己整理的源碼，大神噴時還請手留情。先附一張效果圖：

css樣式：

.lazy{width:400px;height:400px;margin:10px 5px 0 5px;background:url(http://www.yilingsj.com/skin/yilingsj/image/loading.gif) no-repeat center center;}
<!--由於這里是以一張圖片復制演示，所以尺寸大小直接標出。背景圖片是一個Loading的加載圖片，可自由替換-->

jquery:

<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js" charset="utf-8"></script><!--jq庫，此處用的版本是1.8.3，可替換成自己的最新版本庫。此庫禁止省略，因為jq運行是需要庫的！-->
<script type="text/javascript" src="http://www.yilingsj.com/skin/yilingsj/js/jquery.lazyload.js" charset="utf-8"></script><!--這個才是Lazy Load延遲加載的js插件-->
<script type="text/javascript">
$(function($){
　$('img')
　.delay(2000)//由於本地加載速度很快，這里添加一個【delay】起一個緩沖作用，也就是2s后再進行加載內容,便於看效果
　.laxyload({effect:"fadeIn"});//淡入效果，可切換。曾在網上找到一篇文章里面介紹了10幾種，但忘記保存了，現在一直找不到，下次再找到了附上鏈接
});
</script>

html示例：

<img class="lazy"data-original="http://y0.ifengimg.com/news_spider/dci_2013/07/0b6200c5e84f399a9a32a7360790a1da.jpg" />
<!--這里的【lazy】無須寫【display:none】樣式，【data-original】后面跟的是真正的圖片地址，src可省略。網上好多文章都添加上，那個沒必要。-->

最后附一個demo的演示地址：http://www.yilingsj.com/d/file/jquery/2014-06-20/Lazy%20Load%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87%E6%95%88%E6%9E%9C.html

jquery.lazyload.zip插件下載地址：http://www.yilingsj.com/e/DownSys/DownSoft/?classid=86&id=57&pathid=0

轉載原文地址：http://www.yilingsj.com/jquery/2014-06-20/165.html