Image Loading Example
创作时间:
作者:
@小白创作中心
Image Loading Example
引用
1
来源
1.
https://docs.pingcode.com/baike/3723533
在网页开发中，处理图片加载失败是一个常见的需求。本文将详细介绍如何使用JavaScript监听图片的加载状态，并设置备用图像。
监听图片加载状态
使用JavaScript监听图片加载状态是一种有效的方法，它可以确保在图片无法加载时，自动替换为备用图像。这种方法可以提高用户体验，并减少页面加载失败的情况。
1. 设置备用图像
在图片元素中，可以利用JavaScript监听其加载状态，如果加载失败，则自动替换为备用图像。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Loading Example</title>
</head>
<body>
<img src="main-image.jpg" id="mainImage" alt="Main Image">
<script>
window.onload = function() {
var img = document.getElementById('mainImage');
img.onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
};
</script>
</body>
</html>
在上述代码中，main-image.jpg是要加载的主图像，backup-image.jpg是备用图像。当主图像加载失败时，onerror事件将触发，并将图像路径替换为备用图像。
2. 动态创建图片元素
在某些情况下，图像元素可能是动态生成的。此时，可以使用JavaScript动态创建图像元素，并设置加载失败时的替换图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Image Loading Example</title>
</head>
<body>
<div id="imageContainer"></div>
<script>
window.onload = function() {
var img = new Image();
img.src = 'main-image.jpg';
img.alt = 'Main Image';
img.onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
document.getElementById('imageContainer').appendChild(img);
};
</script>
</body>
</html>
在这个示例中，通过JavaScript动态创建图像元素，并将其添加到页面的某个容器中。如果图像加载失败，将自动替换为备用图像。
3. 结合CSS设置占位符
在图像加载过程中，可以使用CSS设置占位符，以确保页面布局不会因为图像未加载而变形。这可以通过设置背景图像或占位图像实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Placeholder Example</title>
<style>
.image-container {
width: 300px;
height: 200px;
background: url('placeholder.jpg') no-repeat center center; /* 设置占位图像 */
background-size: cover;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="image-container">
<img src="main-image.jpg" id="mainImage" alt="Main Image">
</div>
<script>
window.onload = function() {
var img = document.getElementById('mainImage');
img.onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
};
</script>
</body>
</html>
在这个示例中，使用CSS设置了占位图像，并通过JavaScript监听图像加载状态，确保在加载失败时替换图像。
使用懒加载技术
懒加载是一种优化网页性能的技术，它可以在用户滚动到图像可视区域时再加载图像。这样可以减少初始页面加载时间，提高用户体验。
1. 使用Intersection Observer API
Intersection Observer API 是一种高效的懒加载实现方式。以下是一个基本示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Example</title>
</head>
<body>
<img data-src="main-image.jpg" class="lazy-load" alt="Main Image">
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy-load'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy-load');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers without Intersection Observer support
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
});
}
});
</script>
</body>
</html>
在这个示例中，使用了Intersection Observer API来实现懒加载。当图像进入可视区域时，加载实际图像。
2. 结合错误事件处理
在懒加载过程中，仍然需要处理图像加载失败的情况。可以结合错误事件处理来实现这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading with Error Handling Example</title>
</head>
<body>
<img data-src="main-image.jpg" class="lazy-load" alt="Main Image">
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyImages = [].slice.call(document.querySelectorAll('img.lazy-load'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
lazyImage.classList.remove('lazy-load');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Fallback for browsers without Intersection Observer support
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.src;
lazyImage.onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
});
}
});
</script>
</body>
</html>
在这个示例中，结合了懒加载技术和错误事件处理，以确保在图像加载失败时替换为备用图像。
利用错误事件处理
错误事件处理是一种简单且有效的方法，可以在图像加载失败时执行特定操作，如替换图像、显示错误消息等。
1. 简单的错误事件处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error Handling Example</title>
</head>
<body>
<img src="main-image.jpg" id="mainImage" alt="Main Image">
<script>
window.onload = function() {
var img = document.getElementById('mainImage');
img.onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
};
</script>
</body>
</html>
这种方法简单有效，但需要针对每个图像元素进行设置。
2. 统一处理所有图像
可以通过遍历所有图像元素，统一设置错误事件处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unified Error Handling Example</title>
</head>
<body>
<img src="main-image1.jpg" alt="Main Image 1">
<img src="main-image2.jpg" alt="Main Image 2">
<script>
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].onerror = function() {
this.src = 'backup-image.jpg'; // 设置备用图像的路径
};
}
};
</script>
</body>
</html>
这种方法可以统一处理页面中的所有图像，简化代码管理。
使用第三方库
在实际开发中，使用第三方库可以大大简化图像加载和错误处理的代码。以下是两个常用的库示例：
1. 使用LazyLoad库
LazyLoad是一个流行的懒加载库，它支持图像和其他资源的懒加载。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LazyLoad Library Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.3.1/lazyload.min.js"></script>
</head>
<body>
<img data-src="main-image.jpg" class="lazy" alt="Main Image">
<script>
document.addEventListener('DOMContentLoaded', function() {
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
callback_error: function(element) {
element.src = 'backup-image.jpg'; // 设置备用图像的路径
}
});
});
</script>
</body>
</html>
LazyLoad库提供了丰富的配置选项和回调函数，可以轻松实现懒加载和错误处理。
2. 使用Error-Image库
Error-Image是一个小巧的库，用于处理图像加载错误。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Error-Image Library Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/error-image/1.0.0/error-image.min.js"></script>
</head>
<body>
<img src="main-image.jpg" class="error-image" alt="Main Image">
<script>
document.addEventListener('DOMContentLoaded', function() {
ErrorImage.init({
selector: '.error-image',
errorImageSrc: 'backup-image.jpg' // 设置备用图像的路径
});
});
</script>
</body>
</html>
Error-Image库简化了图像加载错误的处理，使代码更加简洁。
总结
本文详细介绍了在网页中设置未加载图片的多种JS方法，包括：使用JavaScript监听图片加载状态、设置占位符图像、使用懒加载技术、利用错误事件处理等。通过这些方法和工具，可以显著提升网页的用户体验和团队的工作效率。
热门推荐
平盐铁路改造工程又有新进展！
一巴掌引发的两起案件：故意伤害的法律代价
经常性肚子疼怎么办？5种实用解决方案
沈姓由来研究报告
优化客户服务流程，提升效率与满意度的双赢策略
道诡异仙：探秘仙道奥秘
深入解析和田且末糖玉的价值：市场走势、投资收藏指南及价格影响因素
大模型如何为运营与产品经理赋能
崩坏星穹铁道：1.0-1.1限定角色专属光锥泛用性分析
【历史文化】生肖之“蛇”：从古至今的图腾文化
犯罪构成的四个条件案例解析：以遗产继承纠纷为例
大黑蚂蚁泡黄酒枸杞：传统养生饮品的功效与制作方法
洗澡时间应该控制在多长时间
单耳聪残疾人证办理流程：法律依据与实践指南
最新消费贷款额度及其法律问题解析
一文读懂：手机如何设置续航更持久？看完你就懂了！
你对压力与压强的认知真的正确吗？
实探｜一夜爆火的Manus，背后团队是什么来头
马斯克“改名”引爆泼天富贵 神秘交易员两天狂赚上千万
放过n100/n305小主机吧，慎重用来all in one
口服用药安全管理指南
土鸡蛋到底好在哪？中国农业科学院这样说！
如何通过微信查询医保卡个人账户明细
《漫威》手游等屡战屡败，IP手游的严苛成功学
韦神要加油！北大袁新意教授取得数学猜想新突破，不愧是黄金一代
发票“抬头”什么意思？又被翻译带歪了，看到 Title 才恍然大悟
树脂基复合材料在可回收火箭中的创新应用研究
为什么要开展动物实验
智慧物流管理系统中常用的数据分析方法有哪些？
如何理解KDJ背离现象并进行分析？这种分析方法在实际操作中的有效性如何？