jQThumb - 一款可以为不同尺寸的图片创建相同尺寸的缩略图插件

关于jQThumb

jQThumb是一款基于jQuery的缩略图插件，它可以很方便的制作指定的尺寸的缩略图。 jQThumb 兼容所有浏览器，包括 IE6。在高级浏览器中使用背景方式实现，并设置图片的尺寸（background-size）和位置（background-position）实现居中；在 IE6 等老旧的浏览器中使用图片的方式实现，并使用绝对定位和 margin 实现居中。jQThumb可以为不同尺寸的图片创建相同尺寸的缩略图插件。 jQThumb也可以作为一个图片延迟加载的插件，图片懒加载的优点是当页面首次加载时，不会一次性加载所有图片，而是在图片进入视窗时才加载，这有助于提高页面加载性能和用户体验。

如何使用jQThumb

步骤1：调用所需文件

<script src="jquery/3.5.1/jquery.min.js"></script>
<script src="path/to/jquery.jqthumb.min.js"></script>

步骤2：创建 HTML 标记

在无序列表中创建图像列表。

<div style="width: 100%; height: 400px;">
    <img src="path/picture.jpg" class="example1" />
</div>
<div style="width: 400px; height: 400px;">
    <img src="path/picture.jpg" class="example2" />
</div>
<button id="kill">
    Kill</button>
<button id="kill-all">
    Kill All</button>

步骤3：调用jQThumb

<script type="text/javascript">
    $(function(){ 
        // plugin initialization
        $('img').jqthumb({
            classname      : 'jqthumb', 
            width          : '100%',    
            height         : '100%',    
            position       : {
                x : '50%',              
                y : '50%'               
            },
            source         : 'src',     
            show           : false,     
            renderPosition : 'before',  
            onDemand       : false,     
            onDemandEvent  : 'scroll',  
            threshold      : 0,         
            responsive     : 20,        
            zoom           : 1,         
            method         : 'auto',    
            reinit         : true,      
            error          : function(dom, imgUrl){  
                console.log(dom, ' with its url "' + imgUrl + '" is invalid.');
            }
            before         : function(oriImage){   
                alert("I'm about to start processing now...");
            },
            after          : function(imgObj){  
                console.log(imgObj);
            },
            done           : function(imgArray){ 
                for(i in imgArray){
                    $(imgArray[i]).fadeIn();
                }
            }
        });

        // kill command
        $('#kill').click(function(){
            $('.your-dom').jqthumb('kill');
        });

        // kill all command
        $('#destroy-all').click(function(){
            $.jqthumb('killall');
        });
    });
</script>

参数说明

$('img').jqthumb({
classname : 'jqthumb', // 类名。默认为 jqthumb
width : '100%', // 裁剪后的新图像宽度。默认为 100px。
height : '100%', // 裁剪后的新图像高度。默认为 100px。
position : {
x : '50%', // 图像的 x 位置。默认为 50%。50% 也表示将图像居中。
y : '50%' // 图像的 y 位置。默认为 50%。50% 也表示将图像居中。
},
source : 'src', // 指定图像源属性。默认为 src。
show : false, // TRUE = 处理后立即显示。FALSE = 不显示。默认为 TRUE。
renderPosition : 'before', // 可用：“before”和“after”。
onDemand : false, // TRUE = 仅当滚动位置到达 DOM 时才加载图像
onDemandEvent : 'scroll', // 可用：“scroll”、“click”、“mouseenter”。默认值为“scroll”
Threshold : 0, // 当“onDemand”设置为 true 且“onDemandEvent”设置为“scroll”时使用。例如，在滚动位置到达 DOM 之前 200px 处开始加载图像。默认值为 0
responsive : 20, // 仅供旧版浏览器使用。0 表示禁用。默认值为 20
zoom : 1, // 缩放输出，2 表示实际图像大小加倍。默认值为 1
method : 'auto', // 有 3 种方法可用：“auto”、“modern”和“native”。默认值为自动
reinit : true, // TRUE = 在第二次重新初始化图像时重新初始化。 FALSE = 什么也不会发生。
error : function(dom, imgUrl){ // 错误时回调，返回图像 url
console.log(dom, ' with its url "' + imgUrl + '" is invalid.');
}
before : function(oriImage){ // 每幅图像开始处理之前的回调。
alert("I'm about to start processing now...");
},
after : function(imgObj){ // 每幅图像裁剪后的回调。
console.log(imgObj);
},
done : function(imgArray){ // 所有图像裁剪后的回调。
for(i in imgArray){
$(imgArray[i]).fadeIn();
}
}
});