黄良钵博客 | Huang Liangbo Blog

程序开发 js瀑布流中图片加载导致渲染重叠解决方案

问题：每个item里面包含图片，由于加载延迟，导致渲染重叠。解决方法：等待图片加载完毕再次渲染。判断图片加载完毕方法： //判断图片加载完成后 var t_img; // 定时器 var isLoad = true; // 控制变量 // 判断图片加载的函数 function isImgLoad(callback) { // 注意我的图片类名都是cover，因为我只需要处理cover。其它图片可以不管。 // 查找所有封面图，迭代处理 $('.cover').each(function () { // 找到为0就将isLoad设为false，并退出each if (this.height === 0) { isLoad = false; return false; } }); // 为true，没有发现为0的。加载完毕 if (isLoad) { clearTimeout(t_img); // 清除定时器 // 回调函数 callback(); // 为false，因为找到了没有加载完成的图，将调用定时器递归 } else { isLoad = true; t_img = setTimeout(function () { isImgLoad(callback); // 递归扫描 }, 500); // 我这里设置的是500毫秒就扫描一次，可以自己调整 } } 在数据加载完的地方添加 isImgLoad $.getJSON("/mock/index/team.json", {}, res => { let html = `<ul class="masonry-list">`; for (const i of res) { html += ` <li class="masonry-item"> <h4 class="masonry-item-tit">${i.title}</h4> <img class="cover" src="${i.img}" alt="${i.title}"> </li>` } html += '</ul>' $('#team .team-main').append(html) // 忽略以上代码 // 判断图片加载状况，加载完成后回调 isImgLoad(function () { // 加载完成，初始化瀑布流 init('team') // 初始化瀑布流方法 }); }) 内容参考：予早

2019-09-17 17:24:33 14 0 0

阅读详情

程序开发 jQuery tab选项卡中的瀑布流

ui使用 weui ，主要看js部分，样式只在外盒子上加 position: relative; width : 100%; item元素添加绝对定位和固定宽度 width : calc((100% - 5px) / 2); position : absolute; <div class="weui-tab"> <div class="weui-navbar"> <div data-id="0" class="weui-navbar__item weui-bar__item_on"> 合作酒店 </div> <div data-id="1" class="weui-navbar__item"> 公司团队 </div> <div data-id="2" class="weui-navbar__item"> 会员活动 </div> <div data-id="3" class="weui-navbar__item"> 加盟共赢 </div> </div> <div class="weui-tab__panel">  <div> <div class="store" id="store"> <div class="store-main"></div> </div> </div> <div style="display:none"> <div class="masonry" id="team"> <ul class="masonry-list"> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> </ul> </div> </div> <div style="display:none"> <div class="masonry" id="activity"> <ul class="masonry-list"> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> </ul> </div> </div> <div style="display:none"> <div class="masonry" id="join"> <ul class="masonry-list"> <li class="masonry-item"> <h4

2019-08-22 14:45:19 87 4 0

阅读详情

网站建设宝塔面板使用WebHook 更新nuxt网站

PS：注意需要关闭宝塔basicAuth认证，否则推送会报401错误（2019年09月11日14:36:52）首先在宝塔中安装WebHook插件：然后添加一个Hook 填入名称，规则可以随便填，待会在改提交后，在列表中点击编辑，然后参考下面的代码修改为你需要的 #!/bin/bash echo "" #输出当前时间 date --date='0 days ago' "+%Y-%m-%d %H:%M:%S" echo "Start" #判断宝塔WebHook参数是否存在 if [ ! -n "$1" ]; then echo "param参数错误" echo "End" exit fi #git项目路径就是你服务器网站允许的地址 gitPath="/www/wwwroot/xn__nf1a578axkh_xn__fiqs8s/$1" #git 网址 gitHttp="git@github.com:hlbj105/$1.git" echo "Web站点路径：$gitPath" #判断项目路径是否存在 if [ -d "$gitPath" ]; then cd $gitPath #判断是否存在git目录 if [ ! -d ".git" ]; then echo "在该目录下克隆 git" git clone $gitHttp gittemp echo "git地址：$gitHttp" mv gittemp/.git . rm -rf gittemp fi #拉取最新的项目文件 git fetch --all git reset --hard origin/master git pull #设置目录权限 chown -R www:www $gitPath # 下面是pm2操作 pm2 show # 重启 pm2 进程，其中blog为你需要重启的进程名或者id pm2 restart blog echo "End" exit else echo "该项目路径不存在" echo "End" exit fi 点击保存后，点击查看密钥，保存下WebHook地址 http://面板地址或者ip/hook?access_key=123&param=aaa access_key 为上面的秘钥 param 为你自定义的传值，在脚本中用$1接收，目前用于git项目名然后在github那边设置Hook 点add webhook后，去提交代码试试看有没有成功在宝塔webhook那边有个日志，可以查看是否成功，或者看你网站有没有成功更新

2019-08-12 09:45:43 74 4 0

阅读详情

程序开发 nuxt使用@nuxtjs/sitemap生成sitemap.xml

依赖于@nuxtjs/sitemap 和 axios ，如果是少量静态页面的话则不需要axios 先安装@nuxtjs/sitemap插件： yarn add @nuxtjs/sitemap axios 然后在 nuxt.config.js 中添加配置 sitemap: { path: '/sitemap.xml', // sitemap文件名，不用改 hostname: 'https://xn--nf1a578axkh.xn--fiqs8s/', // 网址 cacheTime: 1000 * 60 * 60 * 24, // 更新频率，只在 generate: false有用 gzip: true, // 生成 .xml.gz 压缩的 sitemap generate: false, // 允许使用 nuxt generate 生成 // 排除不要页面 exclude: [ '/404' ], // 页面路由 routes (callback) { axios.all([ // blog 分类 axios.get('https://blog.huangliangbo.com/wp-json/xm-blog/v1/menu'), // 文章列表 axios.get('https://blog.huangliangbo.com/wp-json/wp/v2/posts', { params: { page: 1, per_page: 100, _embed: true }, data: { progress: false } }), // 标签 axios.get('https://blog.huangliangbo.com/wp-json/xm-blog/v1/info') ]).then(axios.spread(function (menu, posts, info) { let now = new Date(); now.setHours(now.getHours(), now.getMinutes() - now.getTimezoneOffset()); let indexRoutes = [ { url: '/', changefreq: 'daily', priority: 1, lastmodISO: now.toISOString() } ] let menuRoutes = menu.data.mainMenu.map((data) => { let url = '' if (data.object === 'category') { url = '/category/1?type=' + data.object_id + '&title=' + data.title } if (data.object === 'page') { url = '/page/' + data.object_id } if (data.object === 'post_tag') { url = '/tags/1?type=' +

2019-08-12 09:20:36 81 0 0

阅读详情

程序开发 Nuxt.js客户端、服务端设置请求头

依赖：cookieparser、@nuxtjs/axios 在 plugins/axios.js 中设置请求头： import { Message } from 'element-ui' const cookieparser = process.server ? require('cookieparser') : undefined // eslint-disable-next-line prettier/prettier export default function (ctx) { ctx.$axios.onRequest((config) => { // 客户端设置token if (process.client) { if (ctx.store.state.auth) { config.headers.Authorization = 'bearer ' + ctx.store.state.auth.access_token config.headers.token = ctx.store.state.auth.access_token } } // 服务端设置token if (process.server) { if (ctx.req.headers.cookie) { const parsed = cookieparser.parse(ctx.req.headers.cookie) try { const auth = JSON.parse(parsed.auth) config.headers.Authorization = 'bearer ' + auth.access_token config.headers.token = auth.access_token } catch (err) { // 找不到有效的Cookie } } } // 开发模式打印 URL if (process.env.NODE_ENV !== 'production') { console.log('Making request to ' + config.url) // console.log('Making request to ', config) } }) ctx.$axios.onResponse((res) => { // console.log('onResponse ', res) const code = res.data.code || null const msg = res.data.msg || '' if (code) { if (code !== 0) { Message.error(msg) return Promise.reject(msg) } } }) ctx.$axios.onError((error) => { const code = parseInt(error.response && error.response.status) if (code === 400) { ctx.redirect('/400') } }) } 然后在 store 的

2019-07-26 11:00:43 117 0 0

阅读详情

电脑&系统深度操作系统 V15.11——心随意动畅享云端

深度操作系统是基于Linux内核，以桌面应用为主的开源GNU/Linux操作系统，支持笔记本、台式机和一体机。深度操作系统（deepin）包含深度桌面环境（DDE）和近30款深度原创应用，及数款来自开源社区的应用软件，支撑广大用户日常的学习和工作。另外，通过深度商店还能够获得近千款应用软件的支持，满足您对操作系统的扩展需求。深度操作系统由专业的操作系统研发团队和深度技术社区（www.deepin.org）共同打造，其名称来自深度技术社区名称“deepin”一词，意思是对人生和未来深刻的追求和探索。与上一个版本相比，深度操作系统V15.11对kwin进行了新的优化和适配，稳定性和兼容性大幅度提升，新增deepin云同步，提高了文件管理器性能，新增光盘刻录功能，修复了大量已知bug。deepin V15.11 将为您带来更加美观流畅、便捷爽快的使用体验！ deepin unstable版本现已正式停止技术支持，请unstable 用户尽快前往下载页面安装stable版本。判断是否为unstable版本在终端执行： cat /etc/apt/sources.list 如出现panda字样请重新安装深度操作系统。如输出内容含有lion字样，无需重装。新增的功能 dde-kwin——百尺竿头更进一步窗口管理器dde-kwin 进一步优化，不断完善，更轻量、更美观，兼容性更好。深度商店——自动确认区域，显示赞赏总额深度商店V5.3会根据deepin ID所在地区，自动切换商店区域，在赞赏界面将显示赞赏金额，感谢您对软件开发者的支持！深度云同步——迅速迁移畅游云端在控制中心登录deepin ID，登录成功后可以设置是否自动同步配置项，开启后可以将本机配置轻松同步到云端，同步内容可选网络、声音、电源、鼠标、主题、壁纸、启动器、任务栏、更新、热区等，内容丰富，助您畅享云端。注：此功能目前仅在中国大陆地区提供服务。光盘刻录——简易便捷轻松刻录文件管理器新增刻录功能，存在光驱设备时，点击文件右键菜单即可实现刻录。深度影院功能优化，字幕载入更方便深度影院现可通过鼠标拖拽动作导入字幕，让您的观影更加舒适。任务栏增加电量剩余时间任务栏现已支持电量剩余时间提醒，帮助您合理地安排时间。修复的缺陷与改进的功能 dde* 支持指纹和密码的同时认证；* 修正启动菜单壁纸设置失败；* 修复日历启动后随机崩溃；* 修复认证失败后输入框没有焦点；* 修复“登录后自动更换壁纸”在特殊情况下无效的问题；* 修复了在Nvidia m250和GTX 1060等显卡下3D窗管无法正常使用的问题；* 修复2D模式下dde-dock在某些环境中窗口不显示或窗口为黑色;* 修复可能引起的死锁导致整个系统图形卡死的问题（如系统监视器点击切换进程模式时系统卡死）;启动器：* 修复在搜索界面不能使用快捷键启动程序；* 修复按ESC退出右键菜单后会选择到其他图标；* 禁用深度终端和多任务视图的卸载功能；任务栏：* 修复在部分机型上无法识别是否使用了电源适配器；* 修复调整音量时，音量列表会隐藏；* 修复2d下点击预览会崩溃；* 优化屏幕预览；控制中心：* 新增云同步功能；* 适配用户密码被删除的情况；* 修复快捷键显示有重叠；* 修复用户修改密码时错误提示不会消失；* 修复在多屏幕合并模式下修改分辨率会退出合并模式；* 修复更新完成后首页仍然提醒更新系统；* 修复从非自定义模式切换到自定义模式会删除旧的配置；* Wine应用的缩放设置：用户需要重新登录后再设置缩放才能生效；dde-session-ui:* 适配用户无密码的情况；* 支持LDAP用户登录；* 修复待机后输入框没有焦点；* 修复长时间未使用后锁屏和登录界面卡死问题；* 修复登录界面首次启动会崩溃；* 修复切换用户时提醒密码错误；deepin-kwin:* 修复多次切换3D/2D模式后打开新的有标题栏的窗口时会导致屏幕闪烁的问题；* 修复多次切换3D/2D模式后打开新的有标题栏的窗口时其它未激活窗口的阴影显示为黑色；* 修复窗口无法最小化以及深度影院最小化后再还原无法播放视频；* 修复预览一个已经最小化的窗口时点击此窗口不会显示；* 修复工作区界面的“添加”/“移除”按钮在高分屏下点击后会变小；* 修复wps的窗口有时无法显示的问题；* 限制工作区数量最多为4个；* 优化触屏拖动窗口的体验，修复在拖动过程中容易触发窗口resize动作；* 支持gtk/dtk窗口显示窗口菜单；* 针对坚果云的登录窗口增加窗口规则，修复其登录窗口显示不全的问题；* 窗口菜单使用deepin风格的菜单控件；* 禁用窗口标题栏主题的缓存数据，修复初始化为2倍缩放时，可能会出现窗口标题栏显示区域不对的问题；* 修复最小化的窗口在dock上无预览图；* 修复某种情况下窗口无法主动获取焦点的问题；* 修复将窗口移动到某个工作区的快捷键无效；* 禁用按住Alt键后使用鼠标移动窗口的功能；* 关闭窗口的热区功能只对最大化的窗口生效，且在关闭窗口之前判断其是否允许被关闭；* 在2D模式下尝试进入多任务视图时弹出警告对话框；* 修复在kwin中多屏时只有一个屏幕能显示屏保；* 修复kwin上进入显示桌面模式后再触发屏保会导致任务栏显示在屏保窗口上方；* 禁用窗口拖动时的半透明特效；* 禁用显示桌面后四个角的窗口缩略图；* 修复显示桌面后点击激活或打开窗口时会导致其它已隐藏窗口显示；* 禁用窗口标题栏菜单；* 支持任务栏窗口预览功能；* 修复kwin上拖动或改变窗口大小时鼠标光标样式无变化。深度文件管理器* 新增光盘刻录功能；* 磁盘属性新增容量指示条；* 修复外置磁盘挂载时未在计算机页面显示图标的问题；* 修复系统使用新版lsblk时无法正确判断磁盘是否为可移动设备的问题；* 修复U盘格式化工具的安全利用问题；* U盘格式化工具高分屏支持；* 桌面自动整理图标高分屏支持；* 修复最近文件部分情况右键崩溃的问题；* 修复桌面自动整理无法记住的问题；* 修复复制对话框和选择文件对话框显示菜单选项的问题；* 延迟创建磁盘索引数据，防止在系统启动时创建索引占用io而导致桌面环境启动变慢；* 修复桌面背景和屏幕尺寸部分情况下不一致的问题；* 修复自动整理桌面部分情况可能显示空隙的问题；* 对于 NTFS 分区，隐藏快速索引及创建标记产生的数据库文件以免在 Windows 中显示。深度商店* 增加了自动选区功能；* 应用详情页新增作者，打包者信息；* 支持查看打赏总额；* 重构搜索模块。深度备份还原工具* 修复在添加DISABLE_GUI参数后无法编译；* 修改日志目录，不再 /tmp 中写入任何文件。深度编辑器* 修复在非DDE环境下（无深度文件管理器的保存文件对话框时）保存文件会导致编辑器崩溃的问题；* 修复已有编辑器窗口时双击文件打开，不会把原有的窗口置前的问题；* 选择文件对话框默认打开路径调整为文档文件夹。深度显卡驱动管理器* 修复大黄蜂在stable版本无法使用的问题；* 暂时禁用 prime 方案支持。深度看图* 修复打印预览页面点击页面设置，设置无效的问题。深度影院* 修复多显示器切换时窗口无法响应鼠标的问题。深度音乐* 不再预置网易云联机获取歌词和封面的插件支持；* 修复双击打开文件时不会置前窗口的问题。深度录屏* 修复不能选择窗口。深度截图* 修复不能输入中文；* 修复副屏幕开启缩放后不能选择窗口；* 修复在多屏环境中获取到的窗口位置和大小不对；* 修复模糊工具不能使用。深度终端* 支持通过配置禁用beep；* 增加2D时右下角拖拽窗口调整大小的功能；* 支持在 KWin 下使用背景模糊；* 选中路径后右键打开的功能增加支持相对路径；* 支持标题栏移动到窗口下方位置（无界面入口，仅有配置文件，感谢 @avently）；* 右键菜单增加“打开链接”功能（感谢 @lolimay）；* 修复使用 KWin 时雷神终端无法在失去焦点后重新获取焦点的问题；* 修复远程管理密码包含特殊字符（花括号）时无法正确连接到服务器的问题（感谢 @abcfy2）。深度录音* 修复重命名时崩溃；* 修复dock的声音列表里出现了两个录音图标。关于我们深度操作系统是一款针对普通用户发行的开源Linux，您可自由下载、分发、修改和使用。欢迎您关注我们的微博、微信（深度操作系统）、Twitter、Facebook、Github以第一时间获取最新动态和源代码，同时也欢迎您前往我们的社区论坛，与广大社区成员交流和分享您的快乐。最后，我郑重感谢为深度操作系统提供测试、文档、翻译和镜像支持的社区团队与企业，感谢您无私的贡献，开源有您更精彩。也要感谢一直支持、理解和等待我们的用户，是您给了深度操作系统不断前行的动力，和不断自我修正的勇气。下载地址：https://www.deepin.org/download/全球排名：https://distrowatch.com/table.php?distribution=deepin 文章来自：深度科技社区

2019-07-20 22:25:47 130 0 0

阅读详情

程序开发 js网络图片通过canvas获取图片颜色

依赖于 rgbaster 包，安装rgbaster： yarn add rgbaster import analyze from 'rgbaster' export default { mounted() { this.getBackground() }, methods: { getBackground() { const that = this function getBase64Image(img, suffix) { let canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const dataURL = canvas.toDataURL('image/' + suffix) // 可选其他值 image/jpeg canvas = null // 释放 return dataURL } function getColors(src, cb) { const image = new Image() const splits = src.split('.') const suffix = splits[splits.length - 1] image.setAttribute('crossOrigin', 'anonymous') // 支持跨域图片 image.src = src + '?v=' + Math.random() // 处理缓存 image.onload = function () { const base64 = getBase64Image(image, suffix) cb && cb(base64) } } getColors('https://cdn.huangliangbo.com/wp-content/uploads/2019/04/zh-2.jpg', async function (base64) { const result = await analyze(base64, { scale: 0.6 }) // also supports base64 encoded image strings that.bgColor = result[0].color }) } } } 部分内容来着：canvas图片问题浅析、JS将图片转为base64编码

2019-07-11 14:36:24 113 1 0

阅读详情

程序开发 nuxt.js中ssr报客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。这可能是由于不正确的HTML标记导致的，例如在<p>中嵌套块级元素，或者缺少<tbody>。排水和执行全面客户端渲染。这是使用element-ui没有在ssr中使用导致，在nuxt.config.js中配置： plugins: [{ src: '@/plugins/element-ui', ssr: true }], 就可以不报这错了解决方案来自：https://www.cnblogs.com/chenyablog/p/10278427.html

2019-07-03 11:29:48 105 0 0

阅读详情