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,一经查实,立即删除!

相关文章

jupyter崩溃进不去,报错module ‘mistune‘ has no attribute ‘BlockGrammar‘

是python包引起的问题 [E 2023-10-14 08:40:25.414 ServerApp] Uncaught exception GET /api/nbconvert?1697244025327 (127.0.0.1) HTTPServerRequest(protocol‘http’, host‘localhost:8090’, method‘GET’, uri‘/api/nbconvert?1697244025327’, version‘HTTP/1.1’…

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…

SQL AND, OR and NOT(与,或不是运算符)

SQL AND & OR 运算符 AND&OR运算符用于根据一个以上的条件过滤记录&#xff0c;即用于组合多个条件以缩小SQL语句中的数据。 WHERE子句可以与AND&#xff0c;OR和NOT运算符结合使用。 AND和OR运算符用于根据多个条件筛选记录&#xff1a; 如果由AND分隔的所有条件为TR…

css 特别样式记录

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

代码随想录算法训练营第五十七天| 392.判断子序列 115.不同的子序列

今日学习的文章链接和视频链接 392.判断子序列 https://programmercarl.com/0392.%E5%88%A4%E6%96%AD%E5%AD%90%E5%BA%8F%E5%88%97.html 115.不同的子序列 https://programmercarl.com/0115.%E4%B8%8D%E5%90%8C%E7%9A%84%E5%AD%90%E5%BA%8F%E5%88%97.html 自己看到题目的第…

ChatGPT AutoExpert:通过自定义指令,增强 GPT-4 和 GPT-3.5-Turbo 对话模型的功能

本心、输入输出、结果 文章目录 ChatGPT AutoExpert:通过自定义指令,增强 GPT-4 和 GPT-3.5-Turbo 对话模型的功能前言ChatGPT AutoExpert 简介ChatGPT AutoExpert 主要解决什么问题ChatGPT AutoExpert 开发者版本ChatGPT AutoExpert 通过一组 Prompt 来告诉 GPT 如何回复用户…

Java开发中List数据量大,需要分片批次处理

在开发过程中可能会遇到需要处理的List数据量过大&#xff0c;可以选择分批处理的方式对大量数据进行处理。 1、使用 apache 的工具包 <dependency><groupId>org.apache.commons</groupId><artifactId>commons-collections4</artifactId><v…

【python函数】内置函数slice()用法解析

s l i c e {slice} slice 函数&#xff0c;功能如其名字&#xff0c;切片用的。   参数有仨&#xff0c; s l i c e ( s t a r t , s t o p , s t e p ) {slice(start, stop, step)} slice(start,stop,step)&#xff0c;分别为起始点 s t a r t {start} start &#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&…

libplctag开源库的API介绍

文章目录 1 开源库概要2 API介绍2.1 Tag Model&#xff08;标签模型&#xff09;2.2 Status Codes&#xff08;状态码&#xff09;2.3 Versions and Checking Library Compatibility&#xff08;版本和检查库的兼容性&#xff09;2.4 Tag Life Cycle&#xff08;标签生命周期&a…

【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 个,表示…

php如何在header增加key,sign,timestamp?怎么鉴权?

在PHP中&#xff0c;您可以通过在HTTP请求的Header中增加Key、Sign和Timestamp等信息来进行安全性鉴权。 以下是一种基本的思路和示例&#xff0c;用于说明如何实现这种鉴权机制&#xff1a; 生成Key和Sign&#xff1a; 服务端和客户端之间共享一个密钥&#xff08;Key&#x…

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

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

MySQL 8.0 OCP认证精讲视频、环境和题库之四 多实例启动 缓存、事务、脏读

一、配置第一个mysqld服务 1、编辑选项文件&#xff0c;指定以下选项&#xff1a; [mysqld] basedir/mysql80 datadir/mysql80/data1 socket/mysql80/data1/mysqld.sock pid-file/mysql80/data1/mysqld.pid log-error/mysql80/dat…