图片预加载 - AuxUI - 模块化前端UI框架

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。

我们可以这样使用

<script type="text/javascript">
//加载imgpreload模块
auxui(['imgpreload'], function() {
    $('#img').imgpreload(function(){
        //检查成功
        if($(this).data('loaded')){

        }
    });
});
</script>

实例

通过img标签加载实例


<!-- html -->
<img src="http://auxui.aimlt.com/uploadfile/li/IMG_0522.png" data-id="1">
<img src="http://auxui.aimlt.com/uploadfile/li/20130101130354920.jpg" data-id="2">
<img src="http://auxui.aimlt.com/uploadfile/li/20121230130635725.jpg" data-id="3">

<!-- js -->

<script type="text/javascript">
//加载imgpreload模块
auxui(['imgpreload'], function() {

    
    $('img').imgpreload({

        //加载每个图像时调用回调
        each: function(){
            console.log('图片ID：' + $(this).attr('data-id') + '加载中..');
            //检查成功
            if($(this).data('loaded')){
                console.log('图片ID：' + $(this).attr('data-id') + '加载完成');
            }
        },

        //当所有图像加载时调用回调
        all: function(){
            console.log('全部完成');
        }

    });

});
</script>

通过数组方式加载

把所有用到的图片文件都预先放入一个数组里

<!-- js -->
<script type="text/javascript">
//加载imgpreload模块
auxui(['imgpreload'], function() {

    var t = (new Date).getTime();
    var images = [];
    images.push( 'http://auxui.aimlt.com/uploadfile/li/IMG_0522.png?i=1&t=' + t );
    images.push( 'http://auxui.aimlt.com/uploadfile/li/20130101130354920.jpg?i=2&t=' + t );
    images.push( 'http://auxui.aimlt.com/uploadfile/li/20121230130635725.jpg?i=3&t=' + t );

    $.imgpreload(images, {

        //加载每个图像时调用回调
        each: function(){
            
            var pattern = new RegExp( "i=(\\d)", "gi" );
            var m = pattern.exec($(this).attr('src'));
            var status = $(this).data('loaded') ? 'success' : 'error';
            console.log( m[1] + ': ' + $(this).attr('src') + ' ' + status);

        },

        //当所有图像加载时调用回调
        all: function(){
            console.log('全部完成');
        }

    });

});
</script>

默认图展示预加载示例

预先将默认图展示给用户，在挨个挨个填充示例

<!-- html -->
<!-- 格式 <img src="默认图地址" data-src="预加载图片地址"> -->
<img src="http://auxui.aimlt.com/logo.png" data-src="http://auxui.aimlt.com/uploadfile/li/IMG_0522.png">
<img src="http://auxui.aimlt.com/logo.png" data-src="http://auxui.aimlt.com/uploadfile/li/20130101130354920.jpg">
<img src="http://auxui.aimlt.com/logo.png" data-src="http://auxui.aimlt.com/uploadfile/li/20121230130635725.jpg">

<!-- js -->
<script type="text/javascript">
auxui(['imgpreload'], function() {
    
    var t = (new Date).getTime();

    var images = [];

    $('.imgpreload').each(function(index, el) {

        images.push( $(el).attr('data-src') + '?i='+ index +'&t=' + t );

    });

    $.imgpreload(images, {

        //加载每个图像时调用回调
        each: function(){
            
            var pattern = new RegExp( "i=(\\d)", "gi" );
            var m = pattern.exec($(this).attr('src'));
            var status = $(this).data('loaded') ? 'success' : 'error';
            if(status == 'success'){
                $('.imgpreload').eq(m[1]).attr('src', $(this).attr('src'));
            }else{
                console.log( m[1] + ': ' + $(this).attr('src') + '错误');
            }
        },

        //当所有图像加载时调用回调
        all: function(){
            console.log('全部完成');
        }

    });
});
</script>