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.png3 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 Stringpieces[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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的MT-Retina.js的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。