使用Ajax问题调用SVG Sprites - 腾讯云开发者社区

文章/答案/技术大牛

发布

该如何正确的使用SVG sprites？

大家好，这里是@IT·平头哥联盟，我是`首席填坑官`——苏南，今天要给大家分享的是SVG sprite(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～...css的 background-position，来定位，好处是减少了页面的加载，要命的问题是定位遇到兼容问题，1px\.5px偏差时，搞的你死去活来，后来移动端更是不清晰，被人骂了又骂。 ...当后来有一天，我发现了它svg,当然仅仅svg就拿出来吹水，肯定是会被人喷的一脸口水的，SVG symbols/**SVG symbols**/SVG symbols **重要的事说三遍不过份吧**，这项技术基于两个元素的使用...：和从ps或者Illustrator创建并导出SVG图标，源码大概是这样的：重点来了，那么我们用symbols包装后是这个样子的：那么问题来了，我们直接在页面上引用吗...因为要显示图标，我们还需要使用元素，通俗的讲就是你定义了一组图形对象（使用元素）之后，可以使用元素来对它进行无限次实例化展示。

2.9K2 0

ajax 使用与缓存问题

因此，在某些情况下，get方法会带来严重的安全性问题。...三：AJAX乱码问题　　产生乱码的原因: 　　　　1、xtmlhttp 返回的数据默认的字符编码是utf-8，如果客户端页面是gb2312或者其它编码数据就会产生乱码　　　　2、post方法提交数据默认的字符编码是...jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 "myurl?callback=?"...使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。...可用于控制不同的Ajax事件 ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

3.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

使用svg-sprite-loader 遇到的问题

趁记忆还热乎赶紧过来记录一下自己踩坑的记录现有的项目是从另一个项目移植过来的, 并不是完全移植为了减小项目的体积前端组长将一些暂时用不到的组件 node包都剔除了这也就引出了一下的问题...svg内容没有出来, 于是继续把样式扒过来, 样式对了但svg内容就是死活出不来, 于是我一直搜这个svg在哪个地方引入的怎么注入到页面的折腾了一上午,终于让我发现了一句话原项目中这样写...把svg-sprite-loader 引入引入之后配置好编译好的目录 { test: /\.svg$/, loader: 'svg-sprite-loader',...文件里没有svg> 标签怎么会这样明明有啊后来我又搜了一下这个出错的问题又看了一下 webapck.base.conf.js 这个文件发现还有一个loader 处理了svg文件...[ext]') } }, 二个loader都处理了svg文件导致svg-sprite-loader'在编译的时候并不是svg源文件于是出错了解决方案: 为二个loader

1.9K2 0

使用Jquery的$.ajax 解决csrf问题

CSRF问题 csrf也就是laravel默认在表单提交中都会验证csrf字串，没有的话就不会予以通过。当然，你在普通的表单中加一个@csrf，系统就会自动增加一个hidden隐藏域。...那么如果我使用jquery封装的ajax，如何处理呢？...很简单，要么想上图那样，加一个headers就行： $.ajax({ headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr...} }); 但是，就要求在meta中有一个_token的值，也即需要：那么，也就可以请求ajax...$.ajax({ headers: { 'X-XSRF-TOKEN': $.cookie('XSRF-TOKEN') } }); Laravel默认也会在Cookies

3.7K0 0

高清ICON SVG解决方案（下） - 腾讯ISUX

去调用SVG文件： 1 2 3 .icon { backgound-image: url(test.svg)} 还有如果单独使用background引用SVG也会和第一种方案一样造成请求数增加，所以有不少人通过使用...第四种SVG Sprites 目前市面上有很多提供ICON FONT制作的网站，例如：icomoon不止开源，而且功能实在强大，可以提供输出SVG Sprites的功能，SVG Sprites它的使用方法其实就跟...、gulp-svg-sprites 第五种SVG Defs/Symbols 这种其实就是在SVG Sprites上面更进一步的使用了，SVG Sprites是需要我们去通过坐标获取对应位置图标的，但是...---- 总结 SVG目前还是存在许多问题，Windows下使用IE的兼容性和渲染效果都太差，在PC侧我们无法全量使用，所以我们可以用上面的这套解决方案解决PC下所有浏览器下兼容问题，在Retina...上一篇文章之所以在火狐图标出问题那块讲了许久，并抛出更严谨的图标制作方法的主要原因这个方案需要对合并后的SVG Sprites转成PNG Sprite图片，如果SVG ICON做的有问题，那生成的图片也然出现发虚的情况

1.5K1 0

Ajax系列之异步调用导致的不同步问题

业务场景：点击一个按钮的时候保存数据，同时打开一个弹窗带出保存的数据基于这样的业务场景，最近遇到一个问题，是在ie11才发现的，点击按钮时候，后台打断点加数据库查询都验证数据是保存正确的，不过已经保存的数据是带不到弹窗页面的...，问题比较奇怪，排查了挺长时间，最开始因为在ie才能重现的问题，在极速模式的360浏览器是没问题的，而且第一次点击时候没带出数据，第二次点击时候才可以带出数据，然后很容易让人联想到ie的缓存问题，不过调了大半天...加上ajax不缓存的代码，已经改成post请求，或者get请求连接后面加上一个时间戳参数都不奏效 $(function(){ //ajax不缓存请求结果 $.ajaxSetup({cache...alert提示，发现果然，关联alert弹窗提示之后，数据正常带出，所以确定是因为异步导致的保存的代码，注意async:true,，这里是异步的，之前可能是考虑性能问题，改成异步的 $.ajax({...result){ ... } }); 所以经过一番调试，给出自己的方案，解决方法是用回调函数：保存函数： function saveRecord(seq,callback){ $.ajax

1.7K4 0

为什么要用SVG？- svg与iconfont、图片多维度对比

上面我说过它是图形所以在浏览器中使用的是图形渲染，所以SVG却没有这种问题，请看下图对比：详细的原因可查看我之前写的这篇文章《高清ICON SVG解决方案(上)》 2.icon font只能支持单色...3.ion font可读性不好 icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好 SVG的制作成本与维护成本目前制作SVG...格式给前端同学即可使用。...2.svg sprites与png sprites性能对比这个测试通过将svg sprites生成对应的1倍图png sprites来进行测试，图标在页面的实际大小是相等的。...svg sprites与png sprites差不多，Rendering也比图片要长很多，但最终两者之间综合所消耗时间差不多 ##SVG动画 SVG还有一项动画的能力，目前在许多H5中的有趣动画很多都是用

5.9K6 1

AJAX的一个简单实例，跨域的解决，使用JQuery来进行ajax的调用

1.什么是AJAX ajax（Asynchronous Javascript And XML），中文名为异步的js和xml。可以在不刷新网页的情况下与后台服务器进行通讯，加强用户的体验感。...是目前广泛使用的前端技术，下面将用原生js和JQuery来介绍一个简单的ajax实例。.../2.调用open方法，第一个参数为请求方式（get、post），第二个参数为请求地址，第三个参数为异步或者同步 request.open("GET", "请求url"，true); //3.发送请求..., success: function(data) { //请求成功后回调函数 }, error: function(jqXHR){ //请求失败后回调函数 }, }); 4.解决跨域问题...http://www.abc.com:8080/index.php 协议.二级域名.域名:端口号/目标脚本文件跨域是用ajax异步请求时经常遇到的问题,只要协议、域名、端口号其中一个不同，就产生了跨域访问

7.3K1 0

Vue项目中优雅使用icon

前言 icon在我们前端日常开发中是很常用的，它有很多种使用方式，时至今日，它的使用方式经过了很多种演变，本文会为大家介绍icon的一些历史演变，分析一下这几种使用方式的优劣，我们将采用svg sprites...img图标的资源请求，这是它最大的缺点雪碧图(css sprites) 后来我们为了优化资源请求开始使用CSS雪碧图(css sprites) CSS Sprites在国内很多人叫css精灵/css雪碧图...，主要是解决unicode书写不直观，语意不明确的问题。...方法，该方法主要是来获取文件绝对路径的，我们把使用路径的地方都使用该方法转为绝对路径，当然使用相对路径也是可以的，但是不太安全，平台解析相对路径有差异性，所以绝对路径是最安全的 svg sprites图标使用.../svg文件为上下文，使用正则匹配了它需要检测的文件名，这样它就会在当前目录的svg文件夹下去匹配符合规则的文件名然后我们使用req.keys拿到所有文件名数组，再使用map遍历加载req方法，这样当该文件被调用时会遍历加载所有匹配到的文件

2.8K2 0

SVG字体比IconFont更好用(SVG Sprite)

也许大家都用过字体图标（https://www.iconfont.cn/——，但这次看了这篇文章，感觉直接使用svg更加方便。。。...DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> svg...sprites as well....which makes an Ajax request for the contents and injects that, which allows the fills to work in IE...#“Versus” icon fonts Vector-based: tie Style with CSS: slight edge to SVG sprites (targeting parts, SVG

3.7K6 0

该如何以正确的姿势插入SVG Sprites？

symbol元素对图形的作用是在同一文档中多次使用，添加结构和语义，SVG是无论如何放大缩小都不会糊，而图片当展示的尺寸大于图片本身，就会糊了，糊了，糊了…… 1.1 回顾 Css Sprites 问题又来了，我们直接在页面上引用，就完事了吗？...， IE9以上大多数人还是能接受啦，特别是手机端的用户，再也不用担心测试MM来找你，图标不清晰的问题了啦，是不是很开心，有没有～～总结： Svg Sprites相比Css Sprites，不管是在维护和开发的过程中...，还是在用户体验、性能、大小、项目迭代代码维护上都比Css Sprites方便，更高效便捷; svg sprites优缺点： SvgSprites使用xlink:href #id的方式获取，便于维护和扩展...Css Sprites优缺点： Css Sprites使用background-position不便于维护和扩展、定位不精确等问题，例如：在后期项目迭代中我们需要删除其中一个小图，那么排在它后面的小图位置都要移动

9294 0

web图像的常见应用策略与技巧

这种方式很智能，浏览器去根据你的sizes，从w列表里选择最适合的图像来调用显示。正因为他太智能了，在实际操作中可控性较差，有些我们想精确控制的图像显示，有时候并不能如意。...使用picture元素选择图像，不会有歧义，理解起来也更直观。...3.icon font可读性不好 icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好在对比完之前，可能有同学就会问，SVG...我们仅需要Sprites图的1/4显示在容器内，那么Sprites图与容器的比例应该是4:1，计算公式为： background-size : ( Sprites width / image width...source type="image/svg+xml" srcset="svg.svg"> svg.png" alt=""> 在支持的浏览器里使用SVG，在不支持的浏览器里显示

2.1K1 0

web图像的常见应用策略与技巧

这种方式很智能，浏览器去根据你的sizes，从w列表里选择最适合的图像来调用显示。正因为他太智能了，在实际操作中可控性较差，有些我们想精确控制的图像显示，有时候并不能如意。...使用picture元素选择图像，不会有歧义，理解起来也更直观。...3.icon font可读性不好 icon font主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好在对比完之前，可能有同学就会问，SVG...我们仅需要Sprites图的1/4显示在容器内，那么Sprites图与容器的比例应该是4:1，计算公式为： background-size : ( Sprites width / image width...svg+xml" srcset="svg.svg"> svg.png" alt=""> 在支持的浏览器里使用SVG

2.4K9 0

PHP使用SOAP调用.net的WebService问题

$result->faultstring})", E_USER_ERROR); } else { $data = $result->GetArticleResult; //这里返回的是类，必须使用

2.2K6 0

使用JQuery、Ajax来调用WebService服务基于Spring + CXF框架的Web Service

基于Spring + CXF框架的Web Service 1、在之前的基础上修改的，如果想使用JQuery、Ajax来调用WebService服务，必须需要先获取到请求的参数值，我的参数值是下面的这部分...，新增了出拦截器配置，其他还是使用上篇的类和配置。...，新增了入拦截器配置，其他还是使用上篇的类和配置。...ns2:getOrderById>'; 43 console.log(data); 44 $.ajax... 142 143 144 AJax

2.6K2 0

Linux bridge使用dummy接口调用IPVS的问题

Linux bridge使用dummy接口调用IPVS的问题在IPVS: How Kubernetes Services Direct Traffic to Pods一文中，作者给出了一个简单的组网(...如下)来模拟kubernetes是如何使用IPVS进行通信的。...问题描述当在netns_leah命名空间中测试通过VIP访问netns_dustin中的服务时，发现如果不创建一个类型为dummy，且IP为VIP(10.100.100.100)的接口时，访问是不通的...作者怀疑bridge_home接口并没有调用IPVS规则。如下图，IPVS规则实际是iptables处理路径上挂载的钩子。 ?...总结 dummy接口相当于提供了一个让bridge_home进入iptables的机会，这样就可以使用IPVS规则处理报文。

1.5K1 0

每个前端都需要知道这些面向未来的CSS技术

，或者说更易于控制图标颜色和大小，开始在使用Icon Font来制作Web图标当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件，相应的也带了一定的问题...，比如说跨域问题，字体加载问题随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。...该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显 SVG和img有点类似，我们也可以借助标签和标签，将所有的SVG图标拼接在一起，有点类似于...Sprites的技术，只不过在此称为SVG Sprites svg> 复制代码 SVG Sprites和img Sprites有所不同，SVG Sprites就是一些代码（类似于HTML一样），估计没有接触过的同学会问，SVG Sprites

1.1K4 0

每个前端都需要知道这些面向未来的CSS技术

，面对多种设备终端，或者说更易于控制图标颜色和大小，开始在使用**Icon Font**来制作Web图标当然，字体图标是解决了不少问题，但每次针对不同的图标的使用，需要自定义字体，也要加载相应的字体文件...，相应的也带了一定的问题，比如说跨域问题，字体加载问题随着SVG的支持力度越来越强，大家开始在思考SVG，使用SVG来制作图标。...该技术能解决我们前面碰到的大部分问题，特别是在而对众多终端设备的时候，它的优势越发明显 SVG和img有点类似，我们也可以借助标签和标签，将所有的SVG图标拼接在一起，有点类似于...Sprites的技术，只不过在此称为SVG Sprites svg> SVG Sprites和img Sprites有所不同，SVG Sprites就是一些代码（类似于HTML一样），估计没有接触过的同学会问，SVG Sprites对应的代码怎么来获取呢

9193 0

CSS3与页面布局学习总结（五）——Web Font与Sprite

(.svg)格式： .svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。...这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持 1.4、使用@font-face @font-face { font-family.../font/fontello.svg?.../font/fontello.svg?...2.3、小结 CSS Sprites非常值得学习和应用，特别是页面有很多很小的icon（图标），但如果需要选择使用CSS精灵技术，你需要了解它的优缺点。

2.8K6 0

每个前端都需要知道这些面向未来的CSS技术

9943 0

点击加载更多

该如何正确的使用SVG sprites？

ajax 使用与缓存问题

使用svg-sprite-loader 遇到的问题

使用Jquery的$.ajax 解决csrf问题

高清ICON SVG解决方案（下） - 腾讯ISUX

Ajax系列之异步调用导致的不同步问题

为什么要用SVG？- svg与iconfont、图片多维度对比

AJAX的一个简单实例，跨域的解决，使用JQuery来进行ajax的调用

Vue项目中优雅使用icon

SVG字体比IconFont更好用(SVG Sprite)

该如何以正确的姿势插入SVG Sprites？

web图像的常见应用策略与技巧

web图像的常见应用策略与技巧

PHP使用SOAP调用.net的WebService问题

使用JQuery、Ajax来调用WebService服务基于Spring + CXF框架的Web Service

Linux bridge使用dummy接口调用IPVS的问题

每个前端都需要知道这些面向未来的CSS技术

每个前端都需要知道这些面向未来的CSS技术

CSS3与页面布局学习总结（五）——Web Font与Sprite

每个前端都需要知道这些面向未来的CSS技术

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐