图片加载完成再显示图片

核心只需要三行代码。在图片加载的时候，可以渲染一个加载动画提高用户体验，在图片加载完成后关闭加载动画打开图片显示。增加这个功能并不会浪费多长时间，但能够很大的提升用户体验，让用户知晓这里有张图片正在加载。 var img = new Image(); // url为图片地址 img.src = url; img.onload = res => { // 加载完成，让图片显示 }image相关事件:onabort、onerror、onload

技能 · 2022-02-17 · 625 人浏览
图片加载完成再显示图片

VueJS前端多语言国际化

通常在开发大型项目或国际项目的时候，我们都需要增加国际化模块，使网站可以显示多语言。我的思路是，每个语言分不同的文件，检测用户语言环境或通过用户设置来判断调用哪个语言文件，而在开发中程序员又能清楚到底是什么意思。由于我们不需要兼容IE，所以只使用navigator.language来获取用户语言。第一步：我们需要有个入口文件新建一个languge.js文件，这个文件主要功能为：获取Cookie中是否存在lang值，如果不存在则检测用户语言环境，并获取语言编码储存到Cookie，之后再调用相应的语言文件输出。// 引入js-cookie import Cookies from 'js-cookie' // 获取cookie中lang值 var lang = Cookies.get('lang'); // 如果lang值不存在则设置lang值（第一次访问） if (!lang) { // 如果用户语言环境为zh-CN则设置lang值为zh，并储存到cookie中 if (navigator.language == 'zh-CN') { lang = 'zh'

技能 · 2022-01-08 · 1014 人浏览
VueJS前端多语言国际化

JS禁止手机端全局触摸并允许局部触摸

在开发移动网页端的时候，总会遇到手机浏览器适配混乱，滚动条屡禁不止，以下提出一种解决方案——通过禁用全局触摸并允许局部触摸达到禁止效果。第一步：如果使用Vue开发，可以在Public/index.html入口处添加该代码，如果未使用框架，可单独创建Config文件进行全局引入。document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false });第二步：允许局部块触摸（使用ID获取的节点是一维数组。使用ClassName获取的节点是二维数组）var div = document.getElementsByClassName("divclassname"); div = div[0]; div.ontouchmove = function (ev) { ev.stopPropagation(); };注：有个小Bug，在IOS系统下，触摸局部有几率会让地址栏收回导致布局出现变动，并导致全局滚动条出现，做好UI的适配可解决布局

技能 · 2021-06-20 · 1234 人浏览
JS禁止手机端全局触摸并允许局部触摸

js禁止wap页面缩放

一般我们都是使用html meta头来禁止网页进行缩放操作<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">但是在ios设备上面这条meta是完全不起作用的这个时候我们可以使用js来禁止缩放事件document.documentElement.addEventListener('touchstart', function (event) { if (event.touches.length > 1) { event.preventDefault(); } }, false); var lastTouchEnd = 0; document.documentElement.addEventListener('touchend', function (event) { var now = Date.now(

技能 · 2020-08-10 · 938 人浏览
js禁止wap页面缩放

利用HTML5的contenteditable写一个富文本增加图片的Test

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> [contenteditable]:focus{outline: none;} .QiunsEditor{ width:800px; height:400px; border:1px so

技能 · 2020-07-29 · 635 人浏览
利用HTML5的contenteditable写一个富文本增加图片的Test
2013 - 2024 DIMM. All Rights Reserved.
Theme Jasmine by Kent Liao