移动端h5图片加载问题，预加载、div标签替换img

在开发移动端h5时遇到图片加载不出来的问题，分为大图片和小图片（打包base64区分）
大图片加载解决办法：reload预加载
小图片加载解决办法：div标签替换为img标签

特殊情况：
div标签按钮有点击动效，即按下按钮时active替换为另一张图片
原代码：

// html<div:src="startBtn"@click="startGame"class="game-btn"@touchstart="" // 解决iOS上active动效不生效问题><div/>// css.game-btn {position: absolute;width: 180px;height: 180px;margin-top: 280px;background: url("../../imgs/game-start-btn.png") no-repeat center/contain;&:active {background-image: url("../../imgs/game-start-btn-on.png");}}

改后：

// html<img:src="startBtn"@click="startGame"class="game-btn"@touchstart="startBtnChange('start')"@touchend="startBtnChange('end')"/>
// datastartBtn: require("../../imgs/game-start-btn.png"),btnUrls: {start: require("../../imgs/game-start-btn-on.png"),end: require("../../imgs/game-start-btn.png"),},// jsstartBtnChange(val) {this.startBtn = this.btnUrls[val];},// css.game-btn {position: absolute;width: 180px;height: 180px;margin-top: 280px;}

移动端h5图片加载问题，预加载、div标签替换img相关推荐

jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
图片的懒加载与预加载
懒加载懒加载:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力. 懒加载的实现原理是:将页面上图 ...
图片的懒加载和预加载？
一.写在前面图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
页面优化之懒加载与预加载
1.前言 PC端网速较快,现在普通都是百兆宽带,那么折算一下就是10M/s的下载速度,基本上资源如果在10M以内的话加载还是比较快的. 但是移动端就不行了.移动端需要消耗巨额的流量,所以尽量减少移动端 ...
css 同步加载,同步加载，异步加载，懒加载，预加载
同步加载默认的就是同步加载同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...

移动端h5图片加载问题，预加载、div标签替换img

移动端h5图片加载问题，预加载、div标签替换img相关推荐

最新文章

热门文章