jQuery SVG图像插件SVGMagic

所属分类:媒体-图像

 48356  287  查看评论 (2)
分享到微信朋友圈
X
jQuery SVG图像插件SVGMagic ie兼容9

这种易于使用的jQuery插件将创建一个后备SVG图像到您的网站上。当插件注意到访问者的浏览器不支持SVG图像,将更换新的PNG图像。这些,PNG图像是使用服务器端脚本运行创建的。当访问者浏览器的支持。SVG图像它只是回去睡觉了。

SVGMagic的一大好处是,你不必创建多个版本的图像。你可以只专注于SVG图像,让SVGMagic来帮你处理兼容问题。

SVG 是什么/为什么要用?

SVG是一个矢量图形格式,这意味着它是完全可扩展的。不论大小,它需要显示时,或任何屏幕需要显示上,一个SVG将适应完美。这意味着你可以使用同样的图像桌面和移动(包括视网膜)的游客。他们都得到了完美清晰的图像。

安装

只是包括脚本在你的头,并调用该插件在你的$(document).ready()

<script src="SVGMagic.min.js"></script>
<script>
    $(document).ready(function(){
        $('img').svgmagic();
    });
</script>

svgmagic也支持backgroundimages。你需要解析div,包含背景包括背景选项。

<script src="SVGMagic.min.js"></script>
<script>
    $(document).ready(function(){
        $('.bgimage').svgmagic({
            backgroundimage: true
        });
    });
</script>

选项

你可以分析一个选项对象到SVGMagic。目前,它支持下面的选项:

$('img').svgmagic({
    preloader: {url-to-preloader/false}, // 图像被替换//预加载前,默认:false
    testmode: {false/true}, //SVGMagic工作在每一个浏览器,如果设置为true,默认:false
    secure: {false/true}, // 图像通过https://开头发送,如果设置为true,默认:false
    backgroundimage: {false/true}, //检查给定格为backgroundimages,默认:false
    callback: {false/function} //函数回调图像后,运行被改变,默认:false
    dumpcache: {false/true} //强制删除缓存并创建一个新的PNG,默认值:假
});

支持

该插件是在Internet Explorer版本7和8(其他浏览器已经支持SVG文件)进行测试。


安全/它是如何工作

该脚本使用了SVG转换为PNG服务器端PHP脚本。该插件将请求发送到包含图像“源服务器。那么服务器会抢那些图像,并将其转换成PNG,暂时保存并发送新的图像的URL返回给插件。当插件接收到新的URL将与更换新的。SVG图像。


这时候插件注意到用户的浏览器不支持SVG图像才会发生。目前IE8和更低和Android 2。*不支持SVG图像。

相关插件-图像

二维码生成插件qrcode.js

二维码生成插件qrcode.js,在此插件基础上添加了logo图片功能和对中文的支持,无需对中文转码可直接支持生成中文网址二维码
  图像
 29946  375

jQueryphotoClip图片剪裁插件

jQueryphotoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。
  图像
 81163  418

jQuery钢笔抠图插件(原创)

通过Canvas实现钢笔抠图效果
  图像
 21108  280

SVG图像生成插件triangloid

triangloid是一个JavaScript库,可以将图像生成为多边形图像并输出成SVG格式。它是基于trianglify
  图像
 31955  335

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    千寻 0
    2019/4/10 10:20:54
    用这个插件貌似会影响加载速度,用户体验并不好 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复