In website operation, the loading speed of image content is crucial for user experience and search engine optimization (SEO).Especially when the article contains a large number of images, if all images are loaded at once when the page is loaded, it may cause the page to respond slowly, even affecting the patience of the user.To solve this problem, the Lazyload technology emerged.

AnQiCMS as an efficient enterprise-level content management system, fully considers the flexibility of content publishing and website performance optimization, and provides a concise and powerful support for lazy loading of images in article content.

Why is image lazy loading so important?

Imagine, when a user accesses a long article, the page is densely packed with dozens of high-definition images.Without lazy loading, the browser will attempt to immediately download all images, which will consume a large amount of bandwidth and server resources, and significantly extend the time it takes for the page to be rendered for the first time.The result is that users may lose patience before the page is fully loaded, or feel frustrated due to the long waiting time.

While image lazy loading technology can effectively solve this pain point.Its core idea is: only load images within the user's current visible area. For images outside the screen that are not currently visible, they are loaded when the user scrolls near them.

  1. Improve page loading speed:Reduced the amount of data requests during the first load, allowing page content to be displayed to the user more quickly.
  2. Save bandwidth and server resources:Avoided unnecessary image downloads, especially those that the user may not scroll down to.
  3. Improved user experience:Users do not need to wait for a long time, they can see the page content faster, which improves the fluidity and response speed of the website.
  4. Beneficial for SEO:Search engines are increasingly emphasizing the loading speed and user experience of websites, lazy loading can help improve these indicators, thereby possibly obtaining a better search ranking.

How AnQiCMS handles and displays lazy loading of images: Core Mechanism

AnQiCMS handles image lazy loading in article content with a very flexible and easy-to-integrate mechanism for developers.It prepares support for lazy-loaded HTML structures through template tags and specific parameters.

When you usearchiveDetailTag to retrieve and display articlesContentfield, AnQiCMS allows you to use a speciallazyParameters to indicate the system generates HTML that supports lazy loading of images. For example, if you want to place the image path in a nameddata-srcThe property, so that the front-end JavaScript library can identify, you can use it like this:

{# 在您的文章详情模板中 (例如：template/{模型table}/detail.html) #}
<div>
    {# archiveDetail 标签用于获取文章详情，name="Content" 指定获取文章内容 #}
    {# lazy="data-src" 参数告诉 AnQiCMS 将图片URL放置到 data-src 属性中 #}
    {% archiveDetail articleContent with name="Content" lazy="data-src" %}
    {{ articleContent|safe }}
</div>

Here,lazy="data-src"This parameter is critical. When AnQiCMS rendersContentField within<img>When labeling, it will not directly put the image path intosrcthe attribute, but rather transfer it todata-srcthe attribute. At the same time,srcThe property can be set to a placeholder image (for example, a very small gray image) or left blank.

In this way, the browser will only loadsrcThe content within the attribute (if any), while a large number of images outside the screen will be due to their actual paths stored indata-srcEnglish translation: When users scroll through the page, these images enter the visible area, and the pre-integrated front-end JavaScript lazy loading library will detect them.data-srcProperty, and store the actual image path assigned tosrcProperty, thus triggering the actual loading of the image.

{{ articleContent|safe }}Here are the|safeThe filter is also very important, it tells AnQiCMS not to escape HTML tags in the article content, ensuring that the HTML structure such as images, links, etc. included in the article can be correctly rendered.

Collaboration with image optimization features

In addition to providing lazy loading structure support, AnQiCMS also provides a series of powerful image optimization tools in the "Content Settings" section of the backend, which work协同工作 with lazy loading to further improve website performance:

  • WebP Image Format Conversion:You can choose to enable the WebP image format.WebP format usually has a higher compression rate than traditional JPEG and PNG formats, significantly reducing file size while maintaining image quality.Combined with lazy loading, it can further reduce loading time.
  • Automatically Compress Large Images:AnQiCMS can automatically compress the large-size images uploaded by users to the specified width, which can effectively reduce the physical size and file size of the images, improving loading efficiency.
  • Thumbnail processing and size settings:The system supports various thumbnail processing methods (such as proportional scaling by the longest side, cropping by the shortest side, etc.) and custom sizes.This ensures that smaller, more suitable images are loaded in the article list or thumbnail display area, rather than the original large image.

These background optimization features combined with the front-end lazy loading mechanism constitute a complete image content optimization solution for AnQiCMS, fundamentally improving the website's loading speed and user experience.

Summary

AnQiCMS Through flexible template tags and parameters, it provides a solid foundation for lazy loading of images in article content. It is responsible for preparing the back-end HTML structure, placing the real path of the images intodata-srcIn custom properties, the actual loading logic is delegated to the front-end JavaScript library.This front-end and back-end separation collaboration mode gives content operators great flexibility, allowing them to choose the most suitable front-end lazy loading solution according to their own website needs.At the same time, by combining the built-in image optimization tool of AnQiCMS, you can easily create a high-performance website that loads quickly, is user-friendly, and search engine friendly.

Common Questions (FAQ)

1. Does AnQiCMS's lazy loading feature require additional plugin installation?

AnQiCMS itself has built-in support for image lazy loading on the template level, you do not need to install any additional backend plugins. It generates with parameters to havearchiveDetailthe label uselazyparameters to generate withdata-srcThe HTML of the property.However, the JavaScript logic that actually triggers image loading needs to be integrated into your frontend template manually, which is usually achieved by including a lightweight frontend lazy loading library or writing a small amount of JavaScript code.

2. Why did I setlazy="data-src"But the image is still loaded all at once?

This is likely because you are missing the corresponding JavaScript code to handle it on the front enddata-src属性。AnQiCMS 仅负责将图片 URL 放入 Englishdata-srcWhile browsers do not recognize this attribute and automatically perform lazy loading by default. You need to introduce a front-end lazy loading library (such aslazysizes.js）or write JavaScript code to listendata-srcproperty, and assign its value when the image enters the visible areasrcproperties.

3. Does lazy loading support article thumbnails or images on list pages?

AnQiCMS is mainly for article detail contentContentImages provided in the fieldlazyParameters are supported. For article thumbnails (Thumb/LogoField), usually these images are displayed directly on the list page, and the quantity is relatively small. The system optimizes them through the thumbnail processing and automatic compression functions in the "Content Settings" of the background. If it is indeed necessary to implement lazy loading for thumbnails on the list page, then it needs to be set in the template.<img>标签English添加data-src属性，并结合前端 JS 库实现。