html加载超大像素图片,html – 首先加载低分辨率背景图像,然后加载高分辨率图像...
这是我使用的方法
CSS:
#div_whatever {
position: whatever;
background-repeat: no-repeat;
background-position: whatever whatever;
background-image: url(dir/image.jpg);
/* image.jpg is a low-resolution at 30% quality. */
}
#img_highQuality {
display: none;
}
HTML:
JQUERY:
$("#img_highQuality").off().on("load", function() {
$("#div_whatever").css({
"background-image" : "url(dir/image.png)"
});
});
// Side note: I usually define CSS arrays because
// I inevitably want to go back and add another
// property at some point.
怎么了:
>一个低分辨率版本的背景快速加载.
>同时,更高分辨率的版本被加载为隐藏的图像.
>当高分辨率图像被加载时,jQuery用高分辨率版本交换div的低分辨率图像.
PURE JS VERSION
这个例子对于将一个元素更改为多个元素将是有效的.
CSS:
.hidden {
display: none;
}
#div_whatever {
position: whatever;
background-repeat: no-repeat;
background-position: whatever whatever;
background-image: url(dir/image.jpg);
/* image.jpg is a low-resolution at 30% quality. */
}
HTML:
JAVASCRIPT:
function upgradeImage(object) {
var id = object.id;
var target = "div_" + id.substring(4);
document.getElementById(target).style.backgroundImage = "url(" + object.src + ")";
}
更新/增强(1/31/2017)
这个增强是gdbj的优点,我的解决方案导致图像路径在三个位置被指定.虽然我没有使用gdbj的addClass()技术,但是以下jQuery代码被修改以提取图像路径(而不是将其连接到jQuery代码中).更重要的是,该版本允许多个低分辨率高分辨率图像替换.
CSS
.img_highres {
display: none;
}
#div_whatever1 {
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(PATH_TO_LOW_RES_PHOTO_1);
}
#div_whatever2 {
width: 200px;
height: 200px;
background-repeat: no-repeat;
background-position: center center;
background-image: url(PATH_TO_LOW_RES_PHOTO_2);
}
HTML
JQUERY
$(function() {
$(".img_highres").off().on("load", function() {
var id = $(this).attr("id");
var highres = $(this).attr("src").toString();
var target = "#div_" + id.substring(4);
$(target).css("background-image", "url(" + highres + ")");
});
});
发生什么事:
>根据他们的CSS为每个div加载低分辨率图像背景图像设置. (请注意,CSS还将div设置为预期尺寸.)>同时,分辨率较高的照片正在进行中作为隐藏图像加载(所有共享类名img_highres).>每次img_highres照片都会触发一个jQuery函数完成加载.> jQuery函数读取图像src路径,和改变相应div的背景图像.在里面在上面的例子中,命名约定是可见div的“div_ [name]”和“img_ [同名]”用于加载的高分辨率图像背景.
html加载超大像素图片,html – 首先加载低分辨率背景图像,然后加载高分辨率图像...相关推荐
- 加载超大超长图片(本地、在线)---使用第三方subsampling-scale-image-view
参考学习网址: 关于Andorid加载高清大图(仿sina weibo 里面的长图效果) - CSDN博客 http://blog.csdn.net/t1623183652/article/detai ...
- 小米手机上ImageView加载超大本地图片不显示的问题
小米手机特有问题,开启对应view的硬件加速即可 imageView.setLayerType(View.LAYER_TYPE_HARDWARE, null);
- Android 加载超大长图及原理
Android 加载超大长图及原理 我们在开发中偶尔会遇到加载超大长图,类似于微信n多页聊天记录截图加载.但这类图片一般都会很大,几兆.十几兆.甚至几十兆,很容易造成内存溢出,今天笔者给大家提供一个可 ...
- 前端加载超大图片(100M以上)实现秒开解决方案
前言 前端加载超大图片时,一般可以采取以下措施实现加速: 图片压缩:将图片进行压缩可以大幅减小图片的大小,从而缩短加载时间.压缩图片时需要注意保持图片质量,以免影响图片显示效果. 图片分割:将超大图片 ...
- android 加载网络bitmap图片 oom 简书_Android常见问题--ImageView加载图片OOM
开发中给ImageView加载一个高质量图片时,APP抛出了"Canvas: trying to draw too large(840253440bytes) bitmap."的异 ...
- 【图像增广库imgaug】官方文档翻译(一):加载并增强图片
文章目录 前言 一.加载并增广一张图片 二.加载并显示一张图片 三.增强图像 四.增强一组图像 五.同时用很多增强图像技术 六.增强不同尺寸的图片 前言 imgaug是一个很好用的图像增广库.学习的最 ...
- android 大图分块加载,超大图加载
超大图加载 一个1000 x 20000(宽1000px,高20000px)的大图,如何正常加载显示且不发生OOM ? 分析 当图片超出设备内存大小时,就会导致OOM.但是这么多漂亮的小姐姐,怎么能不 ...
- php网页有图片加载慢,网页加载加速 之 图片延迟加载
[导读]大家还在为网页加载速度而烦恼吗?大家有发现网页在某些浏览器很快,而在某些浏览器却很慢吗?今天向大家介绍一下为何会出现这些情况,并给大家分享一下具体的实现方法 大家还在为网页加载速度而烦恼吗?大 ...
- pygame系列教程——1.2加载及显示图片
文章目录 前言 pygame的坐标 游戏刷新率 Demo演示 pygame加载图片 一.加载图片 二.渲染图片 渲染的顺序 三.刷新窗口 前言 在上一节中,我们了解了pygame的安装及并编写了一个p ...
最新文章
- 雷军:年轻人入职半年内不要对战略和业务提意见,很多想法都不靠谱
- Linux系统下RAID和LVM的实现
- matplotlib.transforms
- 【解决方案】module 'cv2.cv2' has no attribute 'xfeatures2d'
- 【bzoj4080】[Wf2014]Sensor Network 随机化
- Centos7.2安装zabbix3.0.1简要
- BugkuCTF-Crypto题贝斯家
- ${pageContext.request.contextURI} 无效
- oracle date 隐式转换,PL/SQL中的数据类型隐式转换规则
- NFT交易平台Mintable首个提案通过 收入将按比例分配给MINT代币持有者
- python中出现UserWarning: libuv only supports millisecond timer resolution怎么解决
- (一)LINGO入门---软件安装
- 相关关系、因果关系、回归关系的区别
- c语言判断奇偶数的函数,c语言高手进,尽量多做点13. 定义一个函数even(),判断一个整数是否是偶数。如果是偶数返回1,否则返回0。(要求包...
- 压力测试 闪存_[实验]苹果今年大范围使用的TLC闪存颗粒真的是那么不堪吗?
- android6.0新权限申请以及RxPermissions库的使用
- 华为matepad 鸿蒙,鸿蒙阵营再添一员猛将!华为全新平板曝光
- 如何理解卷积(Convolution)?
- Android常见设计模式——代理模式(Proxy Pattern)(二)
- thymeleaf遇到的问题01