In a content management system, the loading efficiency of images is crucial for website performance and user experience, especially for pages with many images.Many users may be concerned about whether AnQiCMS (AnQiCMS) supports lazy loading of images in article content to optimize page loading speed.

The answer is affirmative, AutoCMSSupportImages are displayed lazily in the content of the article.This is due to its flexible template engine and fine-grained control over content display.Although the Anqi CMS itself is a backend content management system and does not execute lazy loading logic directly on the browser side, it provides the necessary mechanisms to allow frontend developers to easily implement this feature.

The core mechanism of lazy loading

The template tag system of AnQi CMS is the core of this function. When we need to call the article content (usually images inserted in the rich text editor) on the article detail page,archiveDetailTag to gainContentfield. ThisContentField has built-in special support for image lazy loading.

Specifically, when calling article content in the template, you can use the attribute to indicate image lazy loading processing. For example:Contentfield.lazyProperty to indicate image lazy loading processing. For example:

{# 假设 archiveContent 变量包含了文章的 HTML 内容 #}
<div>文档内容：{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}</div>

Here are thelazy="data-src"Indicate the system to render article content, it will load HTML<img>TagssrcThe attribute converts todata-srcWhy do this?

Generally, the principle of lazy loading is that the browser, when parsing the page, will only loadsrcAn image with attribute values.data-srcProperties are custom attributes, browsers do not load the images they point to immediately. Front-end JavaScript lazy loading libraries will load the image when it enters the viewport (viewport).data-srcthe value to reassign tosrcThus, triggering the loading of the image.

Therefore, Anqi CMS provides on the template rendering level.lazyThe transformation ability of properties, paving the way for the operation of the front-end lazy loading library.

How to implement image lazy loading

To fully implement lazy loading of article content images, you need to pay attention to the following aspects:

  1. Template configuration): Make sure your article detail page template (usually archiveDetailAt the place where similar tags are called) when obtainingContentWhen a field is, usedlazy="data-src"Or other property names that meet the requirements of your front-end lazy loading library.

  2. Introduction of front-end lazy loading library： You need to include a suitable JavaScript lazy loading library on the front-end page of the website. There are many excellent lazy loading libraries available,lazysizes.js/vanilla-lazyload, or you can also implement it. These libraries are used to listen for page scrolling, when the image is about to enter the user's viewport,Intersection Observer APIthe value of the�性 will be transferred back when the image is about to enter the user's viewport,data-srcthe value of the属性 will be transferred backsrcProperty, thus achieving on-demand image loading.

  3. CSS Style OptimizationTo avoid page layout jitter (Layout Shift) before the image is loaded, you can set the following:<img>Label settings to fix the width and height or use placeholders (such as low-quality image placeholders, solid color background placeholders) to reserve image space in advance.

The benefits of lazy loading

  • Improving the speed of the first screen loading：Reduced the image resources that need to be downloaded during the initial page load, allowing users to see the page content faster.
  • Optimizing user experience：Page response is faster, reducing the user's waiting time, especially for mobile device users.
  • Bandwidth savingEnglish only loads the images that the user actually sees or will see, avoiding unnecessary resource consumption.
  • It is beneficial for SEO：Search engines are increasingly emphasizing page loading speed and user experience, lazy loading helps improve the performance of the website in search engines.

Combining the image optimization features provided by the Anqi CMS itself, such as automatic conversion to WebP format, automatic image compression, etc., lazy loading will further improve the overall loading performance and user experience of the website, helping your website stand out in the highly competitive online environment.

Common Questions (FAQ)

Q1: Does the Anqi CMS backend have a direct switch to enable lazy loading of images?A1：The "One-click Enable" lazy loading feature switch is not directly available in the Anqi CMS backend. Image lazy loading needs to be configured at the template level.archiveDetailTagslazyProperty, and combine it with the front-end JavaScript lazy loading library to implement. This means that developers need to make corresponding modifications to the template files.

Q2：Besides the images in the article content, do the thumbnails on the article list page support lazy loading?A2：The thumbnails on the article list page (such as those through)item.Thumboritem.LogoThe (auto) itself does not directly have a lazy loading attribute conversion feature. However, front-end developers can use it in templates for these thumbnails.<img>标签English添加data-srcThis attribute, along with the corresponding lazy loading library, enables lazy loading of thumbnails. This falls under the category of frontend optimization and has a high degree of flexibility.

Q3：Implementing lazy loading for images requires additional plugin installation?A3：Safe CMS itself provides attribute support for template tags (such as)lazy="data-src")，it is responsible forsrcProperty transformation. But to truly implement the effect of picture lazy loading, it is necessary to introduce a JavaScript lazy loading library on the front-end page (for examplelazysizes.js/Intersection Observer APIThis library will monitor whether the image enters the viewport when the user scrolls the page and assign thedata-srcvalue of the property tosrcProperties, trigger image loading. Therefore, this usually requires cooperation with front-end code, rather than the backend plugin of Anqi CMS.