当前位置:Gxlcms > JavaScript > 基于JavaScript实现移动端点击图片查看大图点击大图隐藏_javascript技巧

基于JavaScript实现移动端点击图片查看大图点击大图隐藏_javascript技巧

时间:2021-07-01 10:21:17 帮助过:7人阅读

一、需求

点击图片查看大图,再点大图隐藏。多用于移动端,因为移动端屏幕小,可能需要查看大图。

二、代码

三、技巧

因为移动端无法添加热点,最终一个解决方法是使用四个a标签定位到左上角,右上角,左下角,右下角四个区域。

PS:手机网站移动端图片实现延迟加载

由于国内的电信网络性价比的限制,和手机处理能力的差异,在设计一个无线应用的时候,

为用户节省流量是一个非常重要的考虑因素。可以说每一个字节都应该为客户端节省。

节约流量可以从以下几个方面关注:

一、使用缓存 比如 利用浏览器本地存储 前面已经讨论过

二、延迟加载代码 (触底检测,通过接口获取数据)

三、资源的延迟加载,图片出现在可视区域再加载,(不考虑自动播放的情况下)音频视频按用户点击加载。

今天简单说一下图片延迟加载的实现方式。

例子基于jQuery 和 jQuery mobile

原理:用户滑动屏幕,屏幕滚动结束(用jQuery 提供的 window scrollstop 事件合适 ) 检测出现在viewport中的图片。

替换图片的 真正 src 属性即可。

技巧:滚动结束之后不要立即检测加载,设置一秒延时,也许用户会立即开始下一次滚屏,基于现在的网络环境,1秒的延时可以说明用户真正想查看这些内容。用微信的朋友可以仔细体验一下这一点。

由于有时钟的控制,当用户频繁快速翻动屏幕,不会发大量请求。

主要代码:

人气教程排行