### ASP.NET 中实现 `<asp:Image>` 控件的图片懒加载 在 ASP.NET 的 Web Forms 开发中，`<asp:Image>` 是一种常用的控件来显示网页上的图像。然而，默认情况下该控件并不支持图片懒加载功能。为了实现懒加载效果，可以通过 JavaScript 或第三方库（如 LazyLoad.js）结合服务器端代码完成。 以下是具体实现方法： #### 方法一：通过自定义属性和 JavaScript 实现懒加载 可以利用 `data-src` 属性存储实际的图片路径，在页面滚动时动态替换默认占位图并加载真实图片。 ##### HTML 和 ASP.NET 代码示例： ```html <asp:Image ID="imgLazyLoad" runat="server" ImageUrl="~/Images/placeholder.jpg" data-original="<%# ResolveClientUrl("~/Images/large-image.jpg") %>" CssClass="lazyload" AlternateText="Lazy Load Example" /> ``` 上述代码中设置了两个重要的属性： - **ImageUrl**: 初始状态下展示的小尺寸占位图。 - **data-original**: 存储真实的高分辨率大图地址[^1]。 ##### CSS 样式设置： 为了让未触发加载的大图不被立即渲染出来，可先隐藏它们直到脚本执行完毕后再显现。 ```css .lazyload { opacity: 0; } .lazyloaded { opacity: 1; transition: all .5s ease-in-out; } ``` ##### JavaScript 部分： 引入 Intersection Observer API 来监听视口变化事件从而启动延迟载入逻辑。 ```javascript document.addEventListener('DOMContentLoaded', function () { const lazyImages = document.querySelectorAll('.lazyload'); if ('IntersectionObserver' in window) { let observerOptions = { rootMargin: '0px', threshold: 0.1 }; let imgObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting && entry.target.tagName === 'IMG') { let realSrc = entry.target.getAttribute('data-original'); if(realSrc){ entry.target.src = realSrc; entry.target.classList.add('lazyloaded'); observer.unobserve(entry.target); } } }); }, observerOptions); lazyImages.forEach(img => imgObserver.observe(img)); } else { // Fallback for browsers without IO support. [...lazyImages].map(img => { setTimeout(() => { if (!img.src || img.src.includes('placeholder')) { img.src = img.dataset.original; img.className += " lazyloaded"; } }, 200); }); } }); ``` 此段脚本会监控所有带有 `.lazyload` 类名的对象，并在其进入可视区域后自动切换至真正的资源链接[^2]。 --- #### 方法二：借助外部插件简化开发流程 如果不想手动编写大量 JS，则可以选择集成成熟的开源项目比如 UnveilJS 或者 Lozad.js 这样的轻量级解决方案。 以 lozad.js 为例说明操作过程如下所示: 安装 npm 包或者直接下载 CDN 文件加入到您的站点当中； 然后只需给目标标签添加特定 class 即可激活相应行为而无需额外编码工作量！ ```bash npm install --save lozad // Or use a cdn link inside your html file header section like so: <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script> ``` 接着修改原有 asp:image 定义形式如下即可生效： ```aspx <asp:Image ID="imgLozadExample" runat="server" data-src='<%=ResolveUrl("~/Content/sample-highres.jpg")%>' alt="Sample High Resolution Picture" class="lozad"/> ``` 最后记得初始化一下这个组件就行啦～ ```js var observer = lozad(); // initializes the plugin with default settings observer.observe(); ``` 以上两种方案均能有效达成预期目的即减少初始请求次数提高首屏呈现速度的同时按需逐步填充剩余部分的内容素材列表项们～ --- ###