图片延迟加载scrollLoading.js应用

  < ul >
                     < li >< a  href ="http://news.qq.com/"  target ="_blank"  name ="xinwen"  title ="腾讯新闻" >
                         < img  class ="scrollLoading"  data-url ="images/col_1.png"  src ="images/loading.gif"  width ="108"
                            height ="86"  border ="0"   />
                     </ a > &nbsp;  </ li >
                     < li >< a  href ="http://news.163.com/"  target ="_blank"  name ="xinwen"  title ="网易新闻" >
                         < img  class ="scrollLoading"  data-url ="images/col_2.png"  src ="images/loading.gif"  width ="108"
                            height ="86"  border ="0"   /></ a >  </ li >
                     < li >< a  href ="http://www.people.com.cn/"  target ="_blank"  name ="xinwen"  title ="人民网" >
                         < img  class ="scrollLoading"  data-url ="images/col_3.png"  src ="images/loading.gif"  width ="108"
                            height ="86"  border ="0"   /></ a >  </ li >
                     < li >< a  href ="http://www.chinabyte.com/"  target ="_blank"  name ="xinwen"  title ="比特网" >
                         < img  class ="scrollLoading"  data-url ="images/col_4.png"  src ="images/loading.gif"  width ="108"
                            height ="86"  border ="0"   /></ a >  </ li >
                     < li >< a  href ="http://www.cntv.cn/"  target ="_blank"  name ="xinwen"  title ="央视网" >
                         < img  class ="scrollLoading"  data-url ="images/col_5.png"  src ="images/loading.gif"  width ="108"
                            height ="86"  border ="0"   /></ a >  </ li >
</ ul >

 js调用

 

  < script  type ="text/javascript" >
        $( function () {
            $(".scrollLoading").scrollLoading();
        });
     </ script >

说明：

1.需要引入jq

2.引用 <script src="js/jquery.scrollLoading.js" type="text/javascript"></script>

3.src为图片加载时候的lodging的图片 ，data-url中的路径才是真正的图片路径！，具体原来请百度！

 效果图：pasting

转载于:https://www.cnblogs.com/nzcblog/p/4000073.html