Javascript 检查横幅是否已加载

嗨，我有一个定制的横幅与以下代码

body，
html{
宽度：100%；
身高：100%；
保证金：0；
字体系列：Arial，衬线；
颜色：#003C78；
}
a{
颜色：#003C78；
}
.横幅包装{
显示器：flex；
宽度：728px；
高度：90px；
}
.页面容器{
位置：相对位置；
溢出：隐藏；
宽度：100%；
}
.页面容器img{
宽度：100%
}
.图像包装器，
.文本包装器{
位置：绝对位置；
高度：自动；
宽度：411px；
}
.图像包装器{
排名：0；
右：-155px；
z指数：2；
动画：slideLeft 14.5s无限轻松0s正常向前；
}
.图像包装器img{
位置：绝对位置；
左：0px；
顶部：-100px；
宽度：150%
}
.文本包装器h1，
.文本包装器h2{
位置：绝对位置；
左：90px；
填充：0；
不透明度：0；
z指数：3；
字体大小：1.3em；
}
.文本包装器h1{
动画：无限衰减14.5s线性0s正常向前；
动画延迟：4s；
顶部：15px；
}
.文本包装器h2{
动画：fadeNew无限14.5s线性0s法线向前；
动画延迟：7.8秒；
}
.文本包装器img{
位置：绝对位置；
左：50px；
底部：30px；
宽度：468px；
高度：180像素
}
.红色包装纸{
位置：绝对位置；
底部：0px；
z指数：9；
右：-600px；
颜色：#fff；
动画：slideLeftNew 14.5s无限轻松0s普通向前；
动画延迟：7秒；
左侧填充：15px；
边框底部：100px实心#E6000A；
右边框：50px实心透明；
身高：0；
宽度：120px；
}
.红色包装纸h3{
字体大小：1.1米；
字体大小：300；
利润上限：26px；
}
.logo img{
宽度：80px；
高度：自动；
利润率：17像素；
}
厨房{
转化：translateY（-40%）；
-webkit转换：translateY（-40%）；
-ms转换：translateY（-40%）；
宽度：63%；
位置：绝对位置；
左-18px；
动画：向上移动14.5秒，正常向前移动0秒；
}
伊姆格·沃尔{
宽度：11%；
位置：绝对位置；
左：0；
z指数：9；
}
@关键帧滑动{
20.95% {
右：-155px
}
85%,
27.19% {
右：135px；
}
}
@关键帧slideLeftNew{
15.95% {
右：-220px
}
20.19%,
37% {
右：0
}
42% {
右：-220px；
}
}
@关键帧淡入淡出{
0% {
不透明度：0
}
23%,
14.38% {
不透明度：1
}
26% {
不透明度：0
}
}
@关键帧fadeNew{
0% {
不透明度：0
}
30%,
14.38% {
不透明度：1
}
33% {
不透明度：0
}
}
@关键帧向上移动{
0% {
转化：translateY（-40%）；
}
50% {
转化：translateY（-45%）；
}
}

哈瓦滑动解

您可以使用jquery来完成

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

工作小提琴：

如果使用JS

function imgError(image) {
    image.onerror = "";
    image.src = "/images/wall.gif";
    return true;
}

<img src="wall.png" onerror="imgError(this);"/>

函数imgError（图像）{
image.onerror=“”；
image.src=“/images/wall.gif”；
返回true；
}

没有JS

<img src="wall.png" onError="this.onerror=null;this.src='/images/wall.gif';" />

哪个图像是横幅？是不是logo.png？一切都是横幅。这三张图片组成了一个动画横幅。参考：投票，我能看到的唯一一件事是加载时最后一张图片处于保留状态，因为src属性已经存在（此处为警报），但加载需要更多时间。对于小图片，这不是一个问题，但是对于大图片，您可以在加载所有图片之前完成响应。这是一个好的开始。但不知何故，我必须阻止是否每个图像都加载到横幅中，如果它们没有加载，则用一个大图像替换整个横幅。因此，如果缺少一个图像，您仍将替换为一个大图像？是的，这是客户想要的。如果四个图像中有一个丢失，则替换整个横幅（文本和所有内容为一个大图像）。