How to implement image lazy loading in the `Content` field of the `archiveDetail` tag, and what HTML attributes need to be modified?

In website operation, page loading speed and user experience are always the core concerns.Especially when the article content contains a large number of images, the initial loading time of the page will often significantly increase, which not only may lead to user loss but also affect the crawling and ranking of search engines.图片懒加载（Lazy Loading）正是解决这一问题的高效策略：它让图片只在进入用户可视区域时才开始加载，从而显著提升页面性能。

AnQiCMS (AnQiCMS) is an efficient content management system that fully considers this need, providing a convenient lazy loading implementation method for handling images on article detail pages. This article will focus onarchiveDetailthe tag inContentField, detailed discussion on how to use the built-in functions of the security CMS to implement lazy loading of images, as well as the modification of the involved HTML properties.

English CMS with core mechanism of image lazy loading

In the template design of English CMS, when we usearchiveDetailtag to call up articles or product details, itsContent字段包含了编辑好的正文内容，其中自然也包括了插入的图片。通常，这些图片会以标准的English<img src="图片地址">The form is directly presented in HTML. The principle of lazy loading images is to prevent the browser from requesting image resources at the beginning of page loading by modifying the attributes of the image tags.

Anqi CMS'sarchiveDetailThe label is built-in with support for lazy loading of images, which greatly simplifies the operation. When we callContentthe field in the template,"lazywe can activate this feature by adding a

How toContentField application of lazy loading images

Firstly, we need to locate the template file for displaying article details, which is usually located in your template directory.{模型table}/detail.html[for example]archive/detail.htmlorproduct/detail.html).

In the template, find the tag call you use to display the article content.archiveDetailIt may look like this:

<div>
    {% archiveDetail articleContent with name="Content" %}{{articleContent|safe}}
</div>

To enable lazy loading for the image within thisContentfield, we just need to givearchiveDetaila labellazyParameter. ThislazyThe value of the parameter is the HTML attribute name where you store the actual URL of the image you want to lazy load. In front-end lazy loading practice,data-srcIt is a very common and recommended attribute name. Therefore, the modified code will become:

<div>
    {% archiveDetail articleContent with name="Content" lazy="data-src" %}{{articleContent|safe}}
</div>

Here are thearticleContentis what we provide forContentField content of the custom variable, you can adjust it according to your actual template situation.

lazy="data-src"The principle of modifying the involved HTML attributes:

When the AnQi CMS parses this template code and outputs HTML to the browser, it intelligently traversesContentall the tags in the field<img>tags. Once it detectslazy="data-src"Parameter, it will not directly put the real URL of the picture.srcInstead, it will perform the following conversion:

The original image tag (for example):<img src="https://en.anqicms.com/uploads/image1.jpg" alt="描述">

Will be automatically modified by the CMS to:<img data-src="https://en.anqicms.com/uploads/image1.jpg" alt="描述">

This modification is the core first step to achieve image lazy loading.data-srcIt is a custom HTML5 data attribute that the browser will not load proactively during parsing.data-srcThe URL is not recognized as a standard image source.

|safeThe importance of filters:

You may have noticed that in{{articleContent}}After that, we added a|safeFilter.This filter is crucial here.The default behavior of Anqi CMS is to escape HTML entities for all content retrieved from the database for security reasons to prevent XSS attacks.ContentThe field contains HTML structure (such as image tags), but not using|safe, then the sharp brackets and other symbols in the image tags will be escaped into&lt;/&gt;This causes the browser to fail to correctly parse the HTML structure.|safeThe filter explicitly tells the system that this content is safe HTML and does not need to be escaped, thereby ensuring that the modified<img data-src="...">Can be correctly recognized by the browser.

Cooperation with front-end JavaScript.

It is worth noting that the Anqi CMS.lazyProperties are only responsible for modifying the HTML structure on the server side, and willsrcattribute in the content withdata-srcEnglishTo make the image truly achieve the "lazy loading" effect, that is, to load the image only when it enters the user's viewport, you also need to introduce the corresponding JavaScript code on the front-end.

This usually involves the following two methods:

  1. Use third-party lazy loading libraries:likeLazysizesThese lightweight frontend libraries will listen to page scrolling and automatically detect elements withdata-srcThe image of (or its configured properties) and when the image is about to enter the viewport,data-srccopy the value backsrcThe attribute triggers the browser to load the image. You just need to include these libraries in the website and initialize them according to their documentation.
  2. Write custom JavaScript:For developers familiar with JavaScript, they can take advantage of modern browsersIntersection Observer APIListen to image elements, and execute the replacement logic of the image URL when the element intersects with the viewport. This method is more flexible and can be optimized according to your specific needs.

No matter which way is taken, the core task of front-end JavaScript is to monitordata-srcattributes<img>tags, when they enter the user's viewport,data-srctosrcProperties, thus completing the image loading.

Summary

Through the use of AnQi CMSarchiveDetailofContentField additionlazy="data-src"Parameters, we can easily let the system automatically modify the HTML attributes of the image tags, laying the foundation for lazy loading of images.In conjunction with the front-end JavaScript lazy loading logic, it can effectively reduce the initial loading burden of the page, and improve the overall performance and user experience of the website.This not only makes your website run more smoothly, but also helps improve its performance in search engines.

Common Questions (FAQ)

  1. Question: I have set in the AnQi CMS templatelazy="data-src"But the image seems to load immediately, why is that? Answer:Anqi CMS'slazyThe attribute is mainly responsible for modifying the HTML structure on the server side, and replacing the actual URL of the image fromsrcMove the attribute todata-srcProperty in.It will not automatically add front-end JavaScript code for you.data-srcThe attribute and copy its value back when the image enters the user's viewportsrcattribute to trigger the image loading.

  2. Q:lazyThe value of the attribute (for exampledata-srcCan it be named arbitrarily? What are the considerations? Answer: lazyThe value of the attribute (for exampledata-srcIt should be consistent with the property name expected by the front-end lazy loading JavaScript library you choose.data-srcis a very common convention, supported by many lazy loading libraries and modern browsers' native lazy loading (combined withloading="lazy"). But if the specific library you are using requires the use ofdata-original/data-image, then yourlazyThe property value should also be set accordinglydata-original/data-imagePlease make sure to consult the official documentation of the front-end lazy loading library you are using to confirm the required property name.

  3. 问：Image lazy loading has a negative impact on SEO? Do I need to worry about the crawler not being able to capture the image? Answer:Modern image lazy loading technology is usually SEO-friendly, and even helps improve rankings because faster page loading speed is an important ranking factor.The crawlers of mainstream search engines (such as Google) are already able to execute JavaScript and understand most lazy loading patterns.The key is to ensure that your lazy loading implementation allows the crawler to identify the real URL of the image during page parsing.data-srcProperties, combined with appropriate JavaScript logic, can ensure that search engines effectively discover and index your image content.At the same time, for the key images on the first screen, it is recommended not to perform lazy loading to ensure that users and crawlers can obtain important information immediately.