图片加载失败时替换为暂无图片的图片

普通人6

已于 2023-03-20 11:39:30 修改

阅读量231

点赞数

分类专栏： HTML JavaScript 文章标签： javascript jquery 前端

于 2023-03-20 11:33:52 首次发布

本文链接：https://blog.csdn.net/qq_19716091/article/details/129664192

版权

HTML 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

JavaScript

14 篇文章 0 订阅

订阅专栏

该段代码是一个JavaScript函数，用于处理网页中图片加载失败（图片裂开）的问题。它首先定义了一个备用图片源，然后遍历所有图片元素，当图片加载出错时，使用备用图片替换。同时，检查图片是否完整加载和自然宽度为0的情况，以确保正确替换。此功能在文档加载完成后立即执行，并设置延迟重试以处理延迟加载的图片。

摘要由CSDN通过智能技术生成

<!-- 处理图片裂开的问题 -->
<script type="text/javascript">
	function img_do() {
		var zanwu = "/zanwu.jpg";

		$("img").error(function () {
			console.log("error");
			this.src = zanwu;
		});

		$.each($("img"), function () {
			var error = false;

			if (!$(this).attr("src")) {
				$(this).attr("src", zanwu).trigger("load");
			}

			if (!this.complete) {
				error = true;
			}

			if (typeof (this.naturalWidth) != "undefined" && this.naturalWidth == 0) {
				error = true;
			}

			if (error) {
				$(this).bind("error.replaceSrc", function () {
					this.src = zanwu;
					$(this).unbind("error.replaceSrc");
				}).trigger("load");
			}
		});
	}

	$(document).ready(function () {
		img_do();
		setTimeout(function () {
			img_do();
		}, 500);
	});

</script>