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