防止渐进式jpeg完全加载

Question

防止渐进式jpeg完全加载

Pro*_*key 5 jpeg progressive

所以,假设我有一个大版本的图像只能作为缩略图显示.是否可以通过使用渐进式jpeg避免为缩略图设置单独的文件,在达到一定数量的扫描时停止加载,并且仅在用户选择完全打开时继续加载？

如果是这样,如何控制图像的加载？

提前致谢.

Answer 1

Vik*_*amp 7

有两种方法:

1.客户端沉重

条件

映像服务器必须支持范围HTTP标头
- 例如.Range: bytes=0-1024意味着您只请求前1024个字节
您必须事先知道要请求的字节数
- 如果从服务器端推送该值,则可以说是完整大小的1/8
- 所以在客户端应该知道确切的字节数
如果Range无效或不支持,那么服务器将返回整个图像,这是一个很好的自然"后备"

跨域请求:如果html和图像位于不同的域上

Access-Control-Allow-Headers: "range" 必须设定

图像服务器上的 Apache .htaccess示例:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers: "range"
</IfModule>

Run Code Online (Sandbox Code Playgroud)

如果浏览器由于CROS设置不当而无法发出请求,则代码会回退以将data-src属性设置为该src属性

概观

请求图片AJAX请求
- 将请求Range标头设置为AJAX您想要返回的字节数
- 设置mimeType为明文(以便我们以后可以对其进行base64编码)
Base64编码数据并将其设置为图像的src属性(<img src="data:image/jpeg;base64,...">)
- 请注意较大的图像,这可能会在客户端上非常沉重
如果因任何原因(例如,不正确的CROS设置)设置src属性失败,则返回以将data-src属性设置为src属性

代码

这是建立在gaetanoM的真棒答案:使用jQuery.ajax()获取图像并将其解码为base64

// for each img, which has data-src and data-bytes attributes
$('img[data-src][data-bytes]').each(function(i,e){
	$.ajax({
	    url: $(e).data('src'), // url of image
	    type: 'GET',
	    headers: {
	    	'Range':'bytes=0-'+$(e).data('bytes') // Range header, eg. Range: bytes=0-1024
	    },
	    mimeType: "text/plain; charset=x-user-defined"
	}).done(function( data, textStatus, jqXHR ) {
	    $(e).attr('src', 'data:image/jpeg;base64,' + base64encode(data)); // on success we set the base64 encoded data to the image's src attribute
	}).always(function(){
	    // if setting the src failed for whatever reason, we fall back to set the data-src attribute to src attribute
	    if(!$(e).attr('src'))
	        $(e).attr('src', $(e).data('src'));
	});
});

function base64encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

Run Code Online (Sandbox Code Playgroud)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- total filesize is 35 933 bytes -->
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="1900">
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="2500">
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="5600">

<!-- if data-bytes are erroneous the server will return the whole image -->
<img data-src="http://shoepimper.com/doklist.com-logo.jpg" data-bytes="error">
<!-- if CROS fails, then it falls back to set the data-src attribute to the src attribute -->
<img data-src="https://i.stack.imgur.com/QOPRf.jpg" data-bytes="error">

Run Code Online (Sandbox Code Playgroud)

2.服务器端重

详细说明ProgressiveMonkey的注释,您可以使用php或任何其他服务器端编程语言轻松修剪图像数据.

概观

服务器端:根据url参数修剪图像数据
- 如果你想知道第一次扫描的确切位置,请阅读这个精彩的答案:渐进式JPEG的完整缩略图需要多少字节？
客户端:根据需要更改该url参数

服务器端代码

<?php
    $div = isset($_GET['div']) && intval($_GET['div'])>1 ? intval($_GET['div']) : 1; // what fraction of the image shall we return
    $img = 'doklist.com-logo.jpg';
    $size = round(filesize($img) / $div); // calculating the size in bytes what we return

    // setting the headers
    header("Content-Type: image/jpeg");
    header("Content-Length: $size");

    $fp = fopen($img, 'r');
        echo fread($fp, $size); // returning the necessary amount of bytes
    fclose($fp);
?>

Run Code Online (Sandbox Code Playgroud)

例子

请在此处查看我们网站徽标(Doklist.com)的示例

请随意使用此url的div参数(另请注意,我的测试服务器可能无法很好地处理增加的流量):http: //shoepimper.com/progressive-thumb.php？div = 14

阅读只是1/24日的文件大小,并返回它作为一个整体的形象: <img src="http://shoepimper.com/progressive-thumb.php?div=24">