vue.js 图片懒加载的实现

本实例依赖于 vue.lazyimg.js 这个vue插件。
官方的demo非常清楚,个人在实际应用的实现如下

加载中
33.jpg
加载完成是一个200ms渐变过程
44.jpg

引用js

<script type="text/javascript" src="js/vue.min.js"></script>
<!--vue 懒加载组件-->
<script type="text/javascript" src="js/vue.lazyimg.js"></script>

Html代码

<div id="today-tui" v-cloak="">
            
        </div>
        <script type="text/v-template" id="template">
            <div id="today-tui" v-cloak="">
                <h5>今日推荐 <a href="javascript:rand_pic()">换一批 <img src="images/flush.svg" /></a></h5>
                <ul>
                    <li v-for="pic in list" >
                        <a v-bind:href="['javascript:show_pic('+pic['id']+')']" style="background-image: url(images/loading3.gif); background-repeat: no-repeat; background-position: center;">
                            <img v-lazyload="pic.img_surl" src="images/blocker.jpg" />
                        </a>
                        <a v-bind:href="['javascript:show_pic('+pic['id']+')']">{{pic.img_title}}</a>
                    </li>
                </ul>
            </div>
        </script>

..
注意,我们习惯了v-bind ,但是在这里图片的实际地址赋值是直接 v-lazyload="pic.img_surl" 。
调用懒加载

Vue.use(Lazyload,{
            //ms
            time: 200,
            fade: true,
            nohori: false
        });    

ajax代码如下

function rand_pic(){
            console.log('rand');
            $.ajax({
            type:"post",
            url:HTTP_URL+"/pic/rand",
            data:{
                token:token,
                t:new Date().getTime()
            },
            timeout:10000,
            dataType:'json',
            headers:{'Content-Type':'application/x-www-form-urlencoded'},//使用post的时候需设置为这个    
            success:function(data){
                console.log(data.data[0].img_surl)
                if(data.code == 1){
                    //vue_obj.$data = {'list':data.data};
                    new Vue({
                        el:'#today-tui',
                        template:document.querySelector('#template').innerHTML,
                        data:{
                            'list':data.data
                        }
                    });
                }
            },
            error:function(xhr,type){
                console.log(token);
                console.log('error:'+xhr.message);
            }
        });
        }
        rand_pic();

标签: vue.js

非特殊说明,本博所有文章均为博主原创。

最新文章

发表评论