jquery.i18n.properties.js使用及seo优化

使用方法

具体使用方法可以参考jquery.i18n.properties的使用讲解与实例 这篇博客,这里仅简单示例
1、下载 jquery.i18n.properties.js文件,地址: jquery.i18n.properties.js
2、设创建语言properties文件,如:strings_en.properties
文件结构: key:value 结构
如下:

Home = Home
Service Features = Service Features
Download link = Download link
About Us = About Us

3、在html中使用

<p data-locale="About Us"></p> 
<!-- 其中data-locale的值就是你在properties文件中设置的key -->

4、切换语言

$.i18n.properties({name: 'strings', //默认使用的properties文件名path: 'i18n',//properties文件所处相对路径mode: 'map',//mode  加载模式//“vars”表示以javascript变量和函数的形式使用文件中的key,//“map”表示以Map的方式使用文件中的key,//“both”表示可以同时使用两种方式。//如果资源文件中的key包含javascript中的关键字,只能使用map。默认值是vars。cache: true,//是否缓存,默认false,false标识每次都加载新的properties文件async:true,//是否异步(这是一个坑,后面会讲)language: 'en',//language :当前需要使用的properties文件名,如果你的文件名为strings_en.properties的话,就en,源码会帮你平凑成strings_en.properties,即上面的name+language+.properties,所以命名需要注意一下callback: function () {//回调,帮你把页面上的带有data-locale属性的标签内容替换$("[data-locale]").each(function () {$(this).html($.i18n.prop($(this).data("locale")));});}
});

踩过的坑

1、一次性加载全部的properties语言文件

如果直接使用这个js库的话,那么每次页面渲染都会直接加载所有的语言properties文件,导致页面渲染速度变慢,卡顿
可以在jquery.i18n.properties.js源码中找到下图所示代码片,删除空框中的代码
在这里插入图片描述
使得代码仅加载 $.i18n.properties方法中的name默认文件,相当于language没用了

 $.i18n.properties({name: 'strings_en',path: 'i18n',mode: 'map',cache: true,async:true,language: lang,callback: function () {$("[data-locale]").each(function () {$(this).html($.i18n.prop($(this).data("locale")));});}});

2、Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help, check https://xhr.spec.whatwg.org/.

即使用了已弃用的 API,一般seo报这种错误,基本是你使用了同步的异步请求,这样会阻塞页面渲染,浏览器非常不推荐这样做。
然而我检查了所有我自己写的js文件后,并没有发现有同步的请求,于是就去找引入的外部js,就发现jquery.i18n.properties.js这个文件中,存在async这个属性,默认是false,即默认同步,而源码中也可以看出在这里插入图片描述
所以我们在切换语言的时候,设置async为true

 $.i18n.properties({name: 'strings_en',path: 'i18n',mode: 'map',cache: true,async:true,language: lang,callback: function () {$("[data-locale]").each(function () {$(this).html($.i18n.prop($(this).data("locale")));});}});

但是设置完成了之后,发现页面上切换不了语言了,查看控制台发现,语言文件是加载了,就是没有作用到页面上去。经过排查,发现是callback这里没有起作用。于是去查看源码,找到几处i18n返回callback的地方
在这里插入图片描述
在这里插入图片描述
当async为true时,起作用的是第二处的代码块,而由于我们在上一步已经更改了源码,使得language属性不起作用,所以我们还需要更改第二处代码
将代码更改为:

 if (settings.async) {if (settings.callback) {settings.callback();}
}

问题就解决了

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/109872.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FPGA基于1G/2.5G Ethernet PCS/PMA or SGMII实现 UDP 网络视频传输,提供工程和QT上位机源码加技术支持

目录 1、前言版本更新说明免责声明 2、我这里已有的以太网方案3、设计思路框架视频源选择OV5640摄像头配置及采集动态彩条UDP协议栈UDP视频数据组包UDP协议栈数据发送UDP协议栈数据缓冲IP地址、端口号的修改Tri Mode Ethernet MAC1G/2.5G Ethernet PCS/PMA or SGMIIQT上位机和源…

解决Drag and drop is not supported导致无法将物理机上的文件拖入Ubuntu

问题起因 因为需要拷贝一个文件从物理机到虚拟机&#xff0c;但是我又不想用有关ftp的程序或者协议&#xff0c;但是直接拖又报错Drag and drop is not supported&#xff0c;索性上网查询了一下解决方法&#xff0c;自己记录一下。 解决方法 安装下面两个程序 sudo apt in…

css 特别样式记录

一、 这段代码神奇的地方在于&#xff0c; 本来容器的宽度只有1200px&#xff0c;如果不给img赋予宽度100%&#xff0c;那么图片 会超出盒子&#xff0c;如果给了img赋予了宽度100%&#xff0c;多个图片会根据自己图片大小的比例&#xff0c;去分完那1200px&#xff0c;如图二。…

xml schema中的all元素

说明 xml schema中的all元素表示其中的子元素可以按照任何顺序出现&#xff0c;每个元素可以出现0次或者1次。 https://www.w3.org/TR/xmlschema-1/#element-all maxOccurs的默认值是1&#xff0c;minOccurs 的默认值是1。 举例 <element name"TradePriceRequest&…

【STM32】---存储器,电源核时钟体系

一、STM32的存储器映像 1 文中的缩写 2 系统构架&#xff08;原理图&#xff09; 3. 存储器映像 &#xff08;1&#xff09;STM32是32位CPU&#xff0c;数据总线是32位的 &#xff08;2&#xff09;STM232的地址总线是32位的。&#xff08;其实地址总线是32位不是由数据总线是…

EV SSL数字证书贵吗

EVSSL证书通常适用于具有高需求的网站和企业&#xff0c;特别是涉及在线交易、金融服务、电子商务平台等需要建立用户信任的场景。大型企业、金融机构、电子商务平台等可以受益于使用EV证书来提升品牌形象和安全性。 申请EVSSL证书&#xff08;Extended Validation SSL certifi…

极光笔记 | 发送功能使用技巧分享

在全球化竞争激烈的商业环境中&#xff0c;高效的消息通知解决方案是企业成功的关键。EngageLab作为一家专注于海外市场的消息服务平台&#xff0c;为全球企业提供了一体化的消息通知解决方案。其中&#xff0c;EngageLab的国际邮件发送是其强大而灵活的产品服务之一。本文将与…

5.覆盖增强技术——PUCCHPUSCH

PUSCH增强方案的标准化工作 1.PUSCH重复传输类型A增强&#xff0c;包括两种增强机制&#xff1a;增加最大重复传输次数&#xff0c;以及基于可用上行时隙的重复传输次数技术方式。 2.基于频域的解决方案&#xff0c;包括时隙间/时隙内跳频的增强 3.支持跨多个时隙的传输块&…

苹果10月24日推送iOS 17.1:修复iPhone 12辐射超标问题 信号会更差

前段时间在iPhone 15系列发布的当天&#xff0c;法国突然宣布iPhone 12不能在该国销售&#xff0c;理由是iPhone 12超过了当地无线电频率暴露的法定范围。 根据法国监管机构ANFR(国家频率管理局)发布的最新消息&#xff0c;苹果将会在10月24日推送iOS 17.1正式版&#xff0c;届…

jmeter(三十三):阶梯线程组Stepping Thread Group,并发线程Concurrency Thread Group

Stepping Thread Group参数详解 this group will start:表示总共要启动的线程数;若设置为 100,表示总共会加载到 100 个线程first,wait for:从运行之后多长时间开始启动线程;若设置为 0 秒,表示运行之后立即启动线程then start:初次启动多少个线程;若设置为 0 个,表示…

移远通信携手MIKROE推出搭载LC29H系列模组的Click boards开发板,为物联网应用带来高精定位服务

近日&#xff0c;移远通信与MikroElektronika&#xff08;以下简称“MIKROE”&#xff09;展开合作&#xff0c;基于移远LC29H系列模组推出了多款支持实时动态载波相位差分技术&#xff08;RTK&#xff09;和惯性导航&#xff08;DR&#xff09;技术的Click Boards™ 开发板&am…

【计算机毕业设计】python在线课程培训学习考试系统637r7-PyCharm项目

使用说明 使用Navicat或者其它工具&#xff0c;在mysql中创建对应名称的数据库&#xff0c;并导入项目的sql文件&#xff1b; 使用PyCharm 导入项目&#xff0c;修改配置&#xff0c;运行项目&#xff1b; 将项目中config.ini配置文件中的数据库配置改为自己的配置&#xff0c;…

文本识别工具 TextSniper 免激活for Mac

TextSniper 是一款 macOS 平台上的文本提取工具&#xff0c;它可以将屏幕上的文字内容快速转换为可编辑的文本。无论是从图像、视频、PDF 文件还是其他类型的文档中提取文字&#xff0c;TextSniper 都提供了便捷的功能。 以下是 TextSniper 的一些主要特点和功能&#xff1a; …

云原生SIEM解决方案

云原生&#xff08;Cloud Native&#xff09;是一种基于云计算的软件开发和部署方法论&#xff0c;它强调将应用程序和服务设计为云环境下的原生应用&#xff0c;以实现高可用性、可扩展性和灵活性。 云原生的优势有哪些 高可用性&#xff1a;云原生可以实现应用程序的高可用…

一篇文章讲明白double、float丢失精度的问题

1.背景 1.10.1 1.2000000000000002 发现上面计算的值竟然和数学计算不一致 2. 问题 计算机是通过二进制计算的&#xff0c;如果我们在二进制的视角来看待上面问题&#xff0c;就很容易发现问题了。 例如&#xff1a;把「0.1」转成二进制的表示&#xff0c;然后还原成十进制&…

选择什么电容笔比较好?平板手写笔推荐

由于苹果Pencil的热销&#xff0c;让华国内市场上&#xff0c;也出现了不少的平替式电容笔&#xff0c;这些产品&#xff0c;有好有坏&#xff0c;价格也很公道。不过&#xff0c;也有很多产品的价格都很平价。我是一个拥有多年经验的数码发烧友&#xff0c;在前几年就开始用上…

链表 oj2 (7.31)

206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; 我们通过头插来实现 将链表上的节点取下来&#xff08;取的时候需要记录下一个节点&#xff09;&#xff0c;形成新的链表&#xff0c;对新的链表进行头插。 /*** Definition for singly-linked list.* struct ListNode…

攻防千层饼

目录 钓鱼 钓鱼攻击 求职招聘 投毒 社会工程学 仿冒IT运维人员 补贴 吃瓜 反钓鱼攻击 DLL劫持制作木马 NSIS制作安装包 mysql蜜罐 LOAD DATA LOCAL INFILE 蜜罐 溯源反制 溯源 钓鱼邮件溯源 后门木马溯源 NPS 未授权访问 默认密码 灯塔 默认密码 反溯源…

Vulnhub系列靶机---Raven2

文章目录 Raven2 渗透测试信息收集提权UDF脚本MySQL提权SUID提权 Raven2 渗透测试 信息收集 查看存活主机 arp-scan -l 找到目标主机。 扫描目标主机上的端口、状态、服务类型、版本信息 nmap -A 192.168.160.47目标开放了 22、80、111 端口 访问一下80端口&#xff0c;并…

亚马逊云科技多项新功能与服务,助力各种规模的组织拥抱生成式 AI

从初创企业到大型企业&#xff0c;各种规模的组织都纷纷开始接触生成式 AI 技术。这些企业希望充分利用生成式 AI&#xff0c;将自身在测试版、原型设计以及演示版中的畅想带到现实场景中&#xff0c;实现生产力的大幅提升并大力进行创新。但是&#xff0c;组织要怎样才能在企业…