你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
thonatos

MT-Retina.js 0个回复 专栏 @ Javascript

thonatos 发布于 1 年前

MT-Retina.js

Github: MT-Retina.js

serve high-resolution images to devices with retina displays.

之前月大总管写的为高分屏提供不同分辨率图像支持的插件,需求变动,增加了语言支持。

Usage

add lib & config

<script src="dist/retina.js"></script>
<script src="src/retina-config.js"></script>

set tags

<img 
data-retina-url="assets/images/test/retina.png" 
data-img-type="normal" 
data-img-lang="en" 
alt="img">

add assets

> tree -L 4                                           
.
└── images
    └── test
        ├── en
        │   ├── retina@1x.png
        │   └── retina@2x.png
        ├── retina@1x.png
        └── retina@2x.png

3 directories, 4 files

Config

customize

Customize the rules for assets can be found in the retina-config.js .

// define filters
Retina.setFilters({
    'normal': function (url, base, ratio, lang) {

        var result,
            prefix = '',
            pieces = url.split('/');

        // Add language support                   
        if (lang) {
            prefix = lang + '/';
        }

        var _postfix = pieces[pieces.length - 1].split('.');            

        // Concat File Path String
        pieces[pieces.length - 1] = prefix + _postfix[0] + '@' + ratio.param + '.' + _postfix[1];

        result = pieces.join('/');

        return result;
    },
    'svg': function (url, base, ratio, lang) {
        return url;
    }
});

modifyRetinaImg()

modifyRetinaImg(target,src);
Retina.retinaUpdate();

About

  • @Author Max
  • @Revised Thonatos.Yang
等待第一条回复
登录后回复,如无账号,请使用邀请码注册