以 HTML 格式预加载图像
Preloading images in HTML
我想预加载这 4 张图像。我试过这个:
<img src="img/1.jpg" style="display:none">
<img src="img/1a.jpg" style="display:none">
<img src="img/1b.jpg" style="display:none">
<img src="img/1c.jpg" style="display:none">
它不起作用,所以我尝试了这个:
new Image().src = "img/1.jpg";
new Image().src = "img/1a.jpg";
new Image().src = "img/1b.jpg";
new Image().src = "img/1c.jpg";
JS方法适用于背景,但不适用于这些。
尝试使用 $.Deferred()
, .queue()
var images = ["http://lorempixel.com/1200/800/cats/"
, "http://lorempixel.com/1200/800/nature/"
, "http://lorempixel.com/1200/800/animals/"
, "http://lorempixel.com/1200/800/technics/"
];
// do stuff when image loaded
var loadImage = function loadImage(elem) {
return $(elem).fadeTo(500, "1.0", "linear");
};
// load images
var loadImages = function loadImages(urls, image, complete) {
// `this` : `document`
urls.forEach(function(imageSrc, i) {
var img = new Image;
var dfd = new $.Deferred();
// return `this` : `document`
dfd.then(function(ready) {
loadImage(ready);
return this
}, function(error) {
console.log(error)
})
.always(function() {
console.log(complete, urls.length);
return urls.length === complete
? $(this)
.data("complete", complete + " images loaded")
.dequeue("images") // when all images loaded
: this
});
// log errors
img.onerror = dfd.reject;
img.onload = function(e) {
complete = this.complete ? ++complete : complete;
dfd.resolveWith(document, [
image.eq(i).prop("src", this.src)
]
);
};
img.src = imageSrc
});
// return `this` : `document`
return this
};
$(window).load(function() {
// init `loadImages`
var complete = 0;
// call `loadImages`,
// `this` context : `document`
loadImages.call(document, images, $(".image"), complete)
});
$(document).ready(function() {
// notify when all images loaded
$(this).queue("images", function() {
console.log($(this).data())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<!-- note , `src` attribute not included -->
<img class="image" style="opacity:0.0" alt="1">
<img class="image" style="opacity:0.0" alt="1a">
<img class="image" style="opacity:0.0" alt="1b">
<img class="image" style="opacity:0.0" alt="1c">
这实际上从未向 DOM 附加任何内容,我使用数组来保留所创建图像的引用,并将它们传递给可选的回调
var paths = [
"img/1.jpg",
"img/1a.jpg",
"img/1b.jpg",
"img/1c.jpg"
];
preloadImages(paths);
function preloadImages(paths, callback) {
var images = [];
var loaded = 0;
paths.forEach(function (path) {
var img = new Image();
img.src = path;
img.onload = onImagePreloaded;
images.push(img);
});
function onImagePreloaded() {
loaded++;
if (loaded === paths.length && callback) {
callback(images);
}
}
}
不是将图像本身设置为 display: none;
,而是将其设置在容器上。
.CSS:
.preload {
display: none;
}
.HTML:
<div class="preload">
<img src="img/1.jpg">
<img src="img/1a.jpg">
<img src="img/1b.jpg">
<img src="img/1c.jpg">
</div>
您只需在
head
中使用 link
标签:
<head>
<link rel="preload" href="example.png" as="image">
</head>
MDN 文档
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像