教程文档【免费下载链接】jstutorialJavascript tutorial book项目地址https://gitcode.com/gh_mirrors/js/jstutorial点击查看免费下载导读本篇技术指南以 jstutorial 仓库的 dom/image.md 为核心系统讲解浏览器端img元素背后的Image构造函数与HTMLImageElement接口如何用代码生成图片节点、如何读写尺寸/跨域/referrer 等特性属性、以及如何借助complete、load、error可靠地判断图片加载状态。读完本文你将掌握从“创建图片节点”到“响应式图片配置”“跨域与隐私策略控制”再到“加载失败兜底”的一整套实战能力可直接用于预加载、懒加载、图片鉴权与占位图替换等常见场景。概述img元素与Image构造函数img元素用于在网页中插入图片它在 DOM 中对应的接口是HTMLImageElement主要继承了Node、Element、HTMLElement三个接口的能力并额外拥有一些与图片特性相关的独有属性该接口本身没有定义自己的方法。浏览器提供了一个原生构造函数Image用于生成HTMLImageElement实例var img new Image(); img instanceof Image // true img instanceof HTMLImageElement // trueImage构造函数可以接受两个整数作为参数分别表示img元素的宽度width和高度height// 语法 Image(width, height) // 用法 var myImage new Image(100, 200);生成的实例通过src属性指定图像网址var img new Image(); img.src picture.jpg;需要特别注意的是新生成的img实例并不属于文档的一部分它只存在于内存中浏览器不会自动渲染它。如果想让它显示在文档中必须手动插入文档例如通过Node.appendChild方法详见 dom/node.mdvar img new Image(); img.src image1.png; document.body.appendChild(img);如果需要把图片插在指定位置可以使用Node.insertBefore见 dom/node.md它接受两个参数第二个参数为null时新节点会被插到末尾等价于appendChild的效果。获取HTMLImageElement实例的三种途径除了使用Image构造函数下面的方式同样可以得到HTMLImageElement实例document.images集合的成员节点选取方法比如document.getElementById得到的img节点document.createElement(img)生成的img节点。document.images[0] instanceof HTMLImageElement // true var img document.getElementById(myImg); img instanceof HTMLImageElement // true var img document.createElement(img); img instanceof HTMLImageElement // true其中document.images属性返回页面中所有img节点组成的类似数组对象HTMLCollection实例可以用索引遍历查找特定图片见 dom/document.mdvar imglist document.images; for(var i 0; i imglist.length; i) { if (imglist[i].src banner.gif) { // 找到目标图片后执行相应处理 } }document.createElement(img)是生成图片节点的另一常用方式它与new Image()完全等价只是 API 风格不同相关用法在 htmlapi/elements.md 中有对照示例// 方法一HTML5 构造函数 Image var img1 new Image(); img1.src image1.png; img1.alt alt; document.body.appendChild(img1); // 方法二DOM HTMLImageElement var img2 document.createElement(img); img2.src image2.jpg; img2.alt alt text; document.body.appendChild(img2); document.images[0].src // image1.png特性相关的属性HTMLImageElement.srcHTMLImageElement.src属性返回图像的完整网址即解析后的绝对地址。// HTML 代码如下 // img width300 height400 idmyImg srchttp://example.com/pic.jpg var img document.getElementById(img); img.src // http://example.com/pic.jpg注意src返回的是经过解析的完整 URL而不是 HTML 源码里写的原始相对路径。HTMLImageElement.currentSrcHTMLImageElement.currentSrc属性返回当前正在展示的图像的网址。它与src的区别在于JavaScript 和 CSS 的 mediaQuery配合srcset/sizes的响应式图片机制都可能改变正在展示的图像此时currentSrc反映的是浏览器实际加载并显示的那个资源地址。HTMLImageElement.altHTMLImageElement.alt属性可以读写img的 HTML 属性alt表示对图片的文字说明。它既是无障碍访问屏幕阅读器的重要字段也会在图片加载失败时作为占位文本显示因此建议始终为图片设置alt。HTMLImageElement.isMap 与 HTMLImageElement.useMapHTMLImageElement.isMap属性对应img元素的 HTML 属性ismap返回一个布尔值表示图像是否为服务器端图像映射server-side image map的一部分。HTMLImageElement.useMap属性对应img元素的 HTML 属性usemap表示当前图像对应的map元素即客户端图像映射所用的map元素标识。HTMLImageElement.srcset 与 HTMLImageElement.sizesHTMLImageElement.srcset属性和HTMLImageElement.sizes属性分别用于读写img元素的srcset属性和sizes属性它们服务于img元素的响应式加载。srcset属性可以单独使用表示同一张图片在不同条件下的候选地址sizes属性必须与srcset同时使用表示在不同媒体条件下的显示宽度帮助浏览器决定选取哪张候选图。// HTML 代码如下 // img srcsetexample-320w.jpg 320w, // example-480w.jpg 480w, // example-800w.jpg 800w // sizes(max-width: 320px) 280px, // (max-width: 480px) 440px, // 800px // idmyImg // srcexample-800w.jpg var img document.getElementById(myImg); img.srcset // example-320w.jpg 320w, // example-480w.jpg 480w, // example-800w.jpg 800w img.sizes // (max-width: 320px) 280px, // (max-width: 480px) 440px, // 800px上面代码中sizes属性指定的规则是视口宽度小于320px时图像显示宽度为280px视口宽度小于480px时图像显示宽度为440px其他情况下图像显示宽度为800px。浏览器会根据当前屏幕下的计算显示宽度到srcset中加载宽度320w、480w、800w最接近的那张图像从而在节省带宽的同时保证显示清晰度。src属性作为兜底资源在浏览器不支持srcset时使用。尺寸相关属性width、height、naturalWidth、naturalHeightHTMLImageElement.width 与 HTMLImageElement.heightwidth属性表示img的 HTML 宽度即由width属性或 CSS 决定的渲染宽度height属性表示高度。这两个属性返回的都是整数。// HTML 代码如下 // img width300 height400 idmyImg srcpic.jpg var img document.getElementById(img); img.width // 300 img.height // 400两个关键细节如果图像还没有加载完成这两个属性返回的都是0如果 HTML 代码没有设置width和height属性则它们返回的是图像的实际宽度和高度即下面的naturalWidth和naturalHeight。HTMLImageElement.naturalWidth 与 HTMLImageElement.naturalHeightHTMLImageElement.naturalWidth属性表示图像的实际固有宽度单位像素HTMLImageElement.naturalHeight属性表示实际固有高度即图片文件本身的分辨率不受 CSS 缩放影响。这两个属性返回的都是整数且是只读的htmlapi/elements.md 中也明确其为“image 对象真实的宽度和高度”。如果图像还没有指定或不可得这两个属性都等于0。var img document.getElementById(img); if (img.naturalHeight img.naturalWidth) { img.classList.add(portrait); }上面代码中如果图片的实际高度大于实际宽度就为它加上portrait竖图样式类。这是一个很实用的方向判断技巧常用于在脚本中根据图片原始比例自动排版。naturalWidth/naturalHeight通常配合load事件使用因为图片元数据只有在加载完成后才可用示例见 htmlapi/elements.mdmyImage.addEventListener(load, function() { console.log(My width is: , this.naturalWidth); console.log(My height is: , this.naturalHeight); });HTMLImageElement.complete可靠判断加载状态HTMLImageElement.complete属性返回一个布尔值表示图片是否已经加载完成。根据 htmlapi/elements.md 的补充说明其更精确的语义是true表示当前图像属于浏览器支持的图形类型并且加载完成、解码过程没有出错否则返回false。有一个容易忽略的细节如果img元素没有src属性complete也会返回true因为此时没有需要加载的资源。complete属性的典型应用场景是解决“事件监听注册过晚”的问题。正如 dom/event-type.md 所指出的有时候图片加载会在脚本运行之前就完成尤其是脚本放置在网页底部时因此load和error事件的监听函数可能根本不会执行。所以比较可靠的方式是用complete属性先判断一下是否加载完成function loaded() { // ... } if (image.complete) { loaded(); } else { image.addEventListener(load, loaded); }HTMLImageElement.crossOrigin跨域设置HTMLImageElement.crossOrigin属性用于读写img元素的crossorigin属性表示跨域请求的身份凭证credentials策略。这一属性对“通过 Canvas 读取图片像素”等需要跨域资源共享CORS授权的场景至关重要——只有正确设置了crossorigin跨域图片才能被 Canvas 安全地读取并导出。这个属性有两个可能的值anonymous跨域请求不要求用户身份credentials这是默认值use-credentials跨域请求要求用户身份。// HTML 代码如下 // img crossoriginanonymous idmyImg srcpic.jpg var img document.getElementById(img); img.crossOrigin // anonymousHTMLImageElement.referrerPolicyreferrer 策略HTMLImageElement.referrerPolicy用来读写img元素的 HTML 属性referrerpolicy表示请求图像资源时如何处理 HTTP 请求的referrer字段即告知服务器“当前请求来自哪个页面”的头部信息。它有五个可能的值no-referrer请求不带有referrer字段no-referrer-when-downgrade如果请求的地址不是 HTTPS 协议即从 HTTPS 降级到 HTTP就不带有referrer字段这是默认值originreferrer字段是当前网页的地址包含协议、域名和端口origin-when-cross-origin如果请求的地址与当前网页同源那么referrer字段带有完整路径跨域请求则只包含协议、域名和端口unsafe-urlreferrer字段包含当前网页的完整地址除协议、域名和端口外还包括路径。这个设置是不安全的因为会向目标服务器泄漏页面路径等敏感信息。设置该属性时需要注意如果img元素的 HTML 代码中没有显式设置referrerpolicy则浏览器采用默认策略no-referrer-when-downgrade。HTMLImageElement.x 与 HTMLImageElement.y页面坐标HTMLImageElement.x属性返回图像左上角相对于页面左上角的横坐标HTMLImageElement.y属性返回纵坐标。这两个属性通常用于在脚本中计算图片在页面中的实际渲染位置例如配合点击坐标判断用户点在了图片的哪个区域或者实现图片拖拽、吸顶等效果。事件属性onload 与 onerror图像加载完成会触发onload属性指定的回调函数。// HTML 代码为 img srcexample.jpg onloadloadImage() function loadImage() { console.log(Image is loaded); }图像加载失败会触发onerror属性指定的回调函数。// HTML 代码为 img srcimage.gif onerrormyFunction() function myFunction() { console.log(There is something wrong); }事件监听的注意事项与兜底方案推荐用addEventListener绑定图片的load/error事件addEventListener的用法见 dom/event.md。一个常见场景是图片加载完成后添加样式类加载失败则隐藏图片示例见 dom/event-type.mdimage.addEventListener(load, function () { image.classList.add(finished); }); image.addEventListener(error, function (event) { image.style.display none; });但在通过脚本动态创建图片时存在前面提到过的“事件可能已经触发完毕”的竞态问题务必结合complete属性先判断见上文“HTMLImageElement.complete”一节。此外还有一个重要建议由于 DOM 的元素节点没有提供“是否加载错误”的属性所以error事件的监听函数最好写在img元素的 HTML 代码中即onerror属性这样才能保证发生加载错误时百分之百会执行img src/wrong/url onerrorthis.style.displaynone; /这种写法常被用于图片加载失败时的占位隐藏或替换为备用图是生产环境中最稳妥的兜底手段。综合实战动态创建、预加载与尺寸判断结合上述知识可以拼装出一个完整的动态图片加载流程先创建Image实例完成预加载待load触发或complete为true后再插入文档并读取实际尺寸var img new Image(); function showAfterLoad() { document.body.appendChild(img); console.log(实际尺寸 img.naturalWidth x img.naturalHeight); } if (img.complete) { showAfterLoad(); } else { img.addEventListener(load, showAfterLoad); img.addEventListener(error, function () { console.log(图片加载失败已停止插入); }); } img.src hero.jpg;需要修改图片的 HTML 属性如alt、crossorigin、referrerpolicy时除了直接使用上文介绍的对应 IDL 属性外也可以使用通用的Element.getAttribute()/Element.setAttribute()方法按属性名读写详见 dom/element.md。关联阅读DOM 模型索引jstutorial 中 DOM 相关章节的完整导航Image 对象位于“DOM 模型”分组的 Document 节点、Element 节点等章节之间dom/document.mddocument.images属性与图片节点集合的遍历dom/event-type.md图片load/error事件类型、complete竞态处理与onerror兜底方案dom/event.mdaddEventListener与removeEventListener事件绑定机制dom/node.mdappendChild、insertBefore等节点插入方法htmlapi/elements.mdimage元素常用属性的另一份对照讲解。赞分享教程文档【免费下载链接】jstutorialJavascript tutorial book项目地址https://gitcode.com/gh_mirrors/js/jstutorial点击查看免费下载相关推荐TypeScript中的函数重载实现Naive Ui Admin多参数处理实战指南 TypeScript中的函数重载实现Naive Ui Admin多参数处理实战指南 TypeScript函数重载是提升代码可读性和类型安全性的关键技巧前端UI组件5分钟上手Obsidian-DB-Folder创建你的第一个笔记数据库5分钟上手Obsidian DB Folder创建你的第一个笔记数据库 Obsidian DB Folder是一款强大的Obsidian插件它能让你在ObsCodex-X Skills/MCP管理完整指南查看、导入与启用禁用Codex X Skills/MCP管理完整指南查看、导入与启用禁用 Codex X 是一款面向 OpenAI Codex 桌面端 / CLI 的可视化管理工教程文档上一篇awesome-copilot 实战指南create-spring-boot-java-project 技能一键生成 Spring Boot 项目骨架下一篇Vant Coupon 优惠券选择器与兑换列表CouponList实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考