![](https://img-blog.csdnimg.cn/20210720123345765.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web
文章平均质量分 56
最优解决方案分享
小唐童
用舍由时,行藏在我
展开
-
如何快速生成图片代码
在前端开发中,大家免不了要用到各式各样的图片来美化我们的页面,无论是通过标签还是利用background样式属性来引用图片,都需要我们来手动读取图片尺寸信息,然后再编写图片样式代码,这样的劳动重复且繁琐!!!是否有简单高效的实现方案呢?。这个插件使用起来非常简单,插件安装后,只需要将使用的图片链接复制到剪切板,然后直接在vscode编辑器中【右键】-【生成代码】,就可以在光标所在位置看到根据复制的图片链接所生成的代码了。生成的代码是支持模版配置,代码生成时会自动填充图片尺寸和图片链接。原创 2023-06-03 22:08:50 · 5047 阅读 · 0 评论 -
H5页面异步图片延迟显示解决方案
这里写自定义目录标题问题提出原因简述解决方案一般方案进阶方案:图片预加载终极解决:利用**工程化**自动完成异步图片预加载问题提出在开发h5页面的时候会经常涉及到图片的使用,对于图片的使用优化前端解决方案颇多,比如图片的懒加载等。但是有另外一种常见情况,网上却鲜有解决方案,那就是交互类图片异步显示问题。举个例子,比如页面中有一个规则弹窗,弹窗背景使用的是图片的形式呈现,在用户网络不稳定情况下,就会发生弹窗已经出现但是弹窗背景并未加载完成,造成弹窗添加微动效无法正常展示,严重影响用户体验,如图示:原因原创 2022-05-21 21:05:45 · 1752 阅读 · 0 评论 -
textArea高度自适应最优解决方案
问题:需求中form表单输入框需要根据输入内容动态调整输入框高度。方案:动态获取textarea元素的scrollHeight属性值,设置到textarea元素的style.height属性中。这里需要注意的是在获取scrollHeight属性值之前应将height设置为auto,否则获取的高度会受到元素padding等属性值的影响。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF原创 2021-08-14 20:50:29 · 1259 阅读 · 0 评论 -
H5实现在线签名,解决页面滑动的问题
原理实现在线签名功能,主要是依托canvas技术。首先生成画布、初始画笔对象,然后为画布添加touch事件监听,通过事件触发绘制文字。保存时通过canvas的toDataURL方法生成base64图片文件进行下一步操作。基于vue的demo实现<template> <div class="page-content"> <header title="用户需求签名"> <button slot="right" @click="handel原创 2020-12-17 18:12:44 · 1895 阅读 · 3 评论 -
为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片?
为什么通常在发送数据埋点请求的时候使用的是 1x1 像素的透明 gif 图片?能够完成整个 HTTP 请求+响应(尽管不需要响应内容)触发 GET 请求之后不需要获取和处理数据、服务器也不需要发送数据跨域友好执行过程无阻塞相比 XMLHttpRequest 对象发送 GET 请求,性能上更好GIF的最低合法体积最小(最小的BMP文件需要74个字节,PNG需要67个字节,而合法的GIF,只需要43个字节)参考资料:SegmentFault 上的回答Web beaconUsing a B原创 2021-02-20 15:25:00 · 679 阅读 · 0 评论