• 当前频道:程序开发

程序开发 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 39 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 110 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 130 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 144 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 139 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 141 0 0
阅读详情

程序开发 Nuxt.js使用pm2服务端渲染应用部署nginx绑定域名

首先根据官方文档打包: nuxt build // 或者 npm run build 然后把 .nuxt, static, package.json, nuxt.config.js 这4个文件夹和文件上传至服务器 然后cd 到服务器的文件存放路径中,执行: npm i -production 配置nginx: upstream wwwserver { server 127.0.0.1:3000; #本地运行的端口 keepalive 2000; } server { listen 80; server_name www.domain.com; #外网访问的域名 client_max_body_size 1024M; location / { proxy_pass http://wwwserver/; proxy_set_header Host $host:$server_port; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } access_log /server/log/www.domain.com/access.log; error_log /server/log/www.domain.com/error.log; } 安装pm2 : npm i pm2 -g 执行启动pm2:pm2 start npm --name "你的项目名" -- run start pm2常用命令: 启动进程: pm2 start app.js pm2 start app.py pm2 start npm -- start pm2 start [app-name] pm2 start all 进程列表: pm2 list 重启进程: pm2 restart [app-name] pm2 restart all 停止进程: pm2 stop [app-name] pm2 stop all 进程日志: pm2 logs pm2 logs [app-name] 服务器上如何开机自动启动: 在服务器端,在项目都通过pm2启动成功之后,(可以通过命令pm2 ls进行查看)我们希望直接通过服务器重启之后能自动启动,可以通过pm2 save命令将当前的启动项保存起来,下次重启系统就可以自动启动了。 文章部分来自:向宗亮的小站

2019-06-28 09:05:40 351 0 0
阅读详情

程序开发 deepin v15.10.1 stable版安装nodejs

curl -sSL https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add - echo "deb https://mirrors.tuna.tsinghua.edu.cn/nodesource/deb_10.x stretch main" | sudo tee /etc/apt/sources.list.d/nodesource.list echo "deb-src https://mirrors.tuna.tsinghua.edu.cn/nodesource/deb_10.x stretch main" | sudo tee -a /etc/apt/sources.list.d/nodesource.list sudo apt-get update sudo apt-get install nodejs 来自: @name2001

2019-06-13 19:34:59 154 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 25
前往