How to implement lazy loading of images in the `archiveDetail` tag of AnQi CMS?

In the era where content is king, the importance of website performance and user experience is self-evident.Especially for content pages with many images, how to avoid affecting user experience and search engine rankings due to slow image loading has become a common concern for website operators.AnQi CMS deeply understands this, providing flexible and efficient content management functions while also offering clever support for image lazy loading (Lazy Load).

Today, let's delve deeper into AnQi CMS.archiveDetailHow tags help us achieve the lazy loading display of images in the content, thereby making the website page load faster and the user's browsing more smooth.

archiveDetailWith content presentation: the starting point of image optimization.

Firstly, let's understandarchiveDetailThe core role of tags. In AnQi CMS, when we want to display a single document, article, or product details on the front-end page, we usually usearchiveDetailTag to get detailed data of these contents. This tag can extract the title, description, classification, and even the core content of the document (Contentfield).

And today we will discuss the image lazy loading, its core revolves aroundarchiveDetailTags retrieved from comments.Contentfields. ThisContentThe field contains all the text, formatting, and embedded images in the article body.To enhance the user experience, we naturally hope that these images will start to load as the user scrolls near them, rather than loading all of them at once when the page is opened.

The secret of lazy loading:lazyThe clever use of parameters

AnQi CMS is designedarchiveDetailWhen labeling, full consideration was given to this performance optimization need, and a very practicallazyparameter was provided to assist in achieving image lazy loading.

lazyParameters themselves do not directly implement lazy loading functions, but they play a crucial role in the 'behind-the-scenes preparation'. Their role is toContentstandardize all images in the fieldsrcProperty (i.e., the actual address of the image), replace it with a custom attribute you specify, for exampledata-srcordata-original.

This is a key step in implementing lazy loading: when the browser parses HTML, if the image address in the image tag is not presentsrcIn the attribute, the browser will not immediately request this image. Instead, it will wait for the JavaScript code on the page to handle these images with custom attributes.

specific toarchiveDetailthe use of tags, it is very intuitive. When you call a field in the templateContentyou just need to add an extralazyparameter and specify a value, which is the one you hopesrcThe property is replaced with a custom property name.

For example, if the lazy loading JavaScript library you are using expects image addresses to be stored indata-srcIn the attribute, then your template code can be written like this:

{# 假设我们把文档内容赋值给articleContent变量 #}
{%- archiveDetail articleContent with name="Content" lazy="data-src" %}
{{articleContent|safe}}

In this code block,lazy="data-src"It is to tell AnQi CMS to outputarticleContentWhen, convert all<img src="图片地址">The HTML structure of<img data-src="图片地址">. And the original imagesrcThe property may be replaced with a placeholder (such as a very small blank image) or removed, depending on the internal implementation of Anqi CMS and your lazy loading library requirements.|safeThe filter is essential, it ensures that HTML content is not escaped and is displayed in its original HTML form on the page.

Integrate external lazy loading library: complete the lazy loading loop

To truly implement the lazy loading effect of images, it is not enough to have the Anqi CMS'slazyThe parameter is insufficient because it only completes the frontend HTML structure's "pre-processing".You need to introduce a dedicated JavaScript lazy loading library to complete the subsequent work.data-srcvalue, and then reassign it tosrcthe attribute to trigger the actual loading of the image.

Usually, the steps to integrate a JavaScript lazy loading library would be like this:

1. Choose and import the lazy loading library:You can find many excellent lazy loading libraries (such as lazysizes, vanilla-lazyload, etc.) on the internet. Introduce the JS file of the library you choose into the template file of the website, usually at the bottom orheadIn a tag, for example, inbash.htmlAdd in the (public header or footer)<script src="path/to/lazyload.min.js"></script>.
2. Initialize or configure the library:Based on the documentation of the lazy loading library you choose, perform the corresponding initialization or configuration. This step will usually tell the library which images need to be lazy loaded (for example, all images withdata-srcThe image of the property, and when to trigger loading (for example, 200 pixels from the viewport).
3. Ensure the property name matches:This step is crucial, also for the Anqi CMS.lazyThe parameter plays a role. You need toarchiveDetailin the taglazyThe property name set by the parameter should be consistent with the property name expected by the JavaScript lazy loading library. If the library expectsdata-original, then you should uselazy="data-original".

Passing through the Aanqi CMS'sarchiveDetailCollaboration between tags and external JavaScript libraries allows your article detail page to implement efficient image lazy loading, greatly improving page loading speed and user browsing experience.

The optimization effect brought

By this method, your website can get many benefits from implementing lazy loading of images:

• Improve page loading speed:The browser does not need to request all image resources when loaded for the first time, reducing the amount of data and HTTP requests for the initial load.
• Improve user experience:Users do not have to wait for all images to load before starting to read the content, the page response is faster, and the waiting time is reduced.
• Optimize SEO performance:Page loading speed is an important indicator for search engines to measure user experience, and faster loading speed helps to improve the ranking of the website in search engines.
• Save bandwidth resources:Images are only loaded when they are about to enter the user's viewport. For images that the user may not scroll to, they are not loaded at all, thus saving server bandwidth.

In short, the Anqi CMS'sarchiveDetailin the labellazyThe parameter provides a flexible and effective mechanism to help us implement lazy loading for images on content pages.It perfectly combines server-side template rendering with client-side JavaScript logic, creating a faster and smoother website experience.

Frequently Asked Questions (FAQ)

1. If I usedlazythe parameter but did not introduce any JavaScript lazy loading library, what will happen?Answer: In this case, the image will not display correctly. Becauselazythe parameter will replacesrcthe attribute (the key for the browser to recognize and load the image) with a custom attribute (such asdata-srcWithout a JavaScript library to reassign the values of these custom propertiessrcthe browser won't know where to load the image.

2. BesidesarchiveDetailLabel, are there any other ways to implement lazy loading of images in AnQi CMS?Answer:archiveDetaillabel'slazyThe parameter is for the article contentContentBuilt-in image support in the field. For images at other locations, such as thumbnail images on the list page, slide images, or images in custom blocks, you may need to manually adjust according to the specific situation.<img>the tag withdata-srcWait for custom properties, and make sure your JavaScript lazy loading library can recognize and handle these images.

3. Does Anqi CMS provide other image optimization features such as image compression or WebP format conversion?Answer: Yes, AnQi CMS provides rich image optimization features in the content settings of the backend.For example, you can set whether to download remote images to local, whether to automatically compress large images, compress to a specified width, choose different thumbnail processing methods (such as proportional scaling by the longest side, padding, or cropping), and whether to enable WebP image format conversion.These features work with lazy loading to further improve the loading efficiency and storage optimization of website images.