How to configure AnQiCMS to enable lazy loading of images on the page?

In today's rich internet world, the importance of website loading speed for user experience and search engine optimization (SEO) is self-evident.Especially when a page contains a large number of images, how to effectively manage the loading of these images, avoid the delay caused by loading all resources at once, has become a focus of many website operators.The Lazy Load technology is the tool to solve this problem, it allows images to be loaded only when the user is about to see them, thereby significantly improving page performance.

AnQiCMS as a high-performance content management system, fully considers the efficiency of content presentation.Although it is built on the Go language, it inherently has the advantage of fast response, but it also provides flexible mechanisms to achieve lazy loading effects in image processing.Next, let's discuss how to configure AnQiCMS to enable smooth lazy loading of images on the website.

Understanding the image processing and lazy loading mechanism of AnQiCMS

In AnQiCMS, content management and template rendering are the core elements for implementing lazy loading of images. The system itself focuses on backend data processing and the flexible application of template tags, providing a key template tag parameter that allows us to load images when rendering.srcProperty is converted to other custom properties (such asdata-src）。Image lazy loading usually depends on front-end JavaScript libraries, which assign custom attributes (such asdata-src）to the value reassigningsrcAttribute, thus triggering image loading.

Therefore, to implement lazy loading in AnQiCMS, mainly two steps are required:

  1. In the AnQiCMS template, configure to set the image'ssrcThe attribute should be replaced with the custom attribute required for lazy loading.
  2. Introduce a front-end JavaScript lazy loading library that is responsible for listening to whether the image enters the visible area and performs the loading operation.

Configuration steps in detail

First step: Optimize backend image settings (auxiliary but important)

Before starting lazy loading, it is advisable to check some image optimization settings on the AnQiCMS backend, which can further improve image loading efficiency. Enter the AnQiCMS backend, find "Global Function Settings" under "Content Settings":

  • Whether to enable Webp image formatIf your website images are mainly in JPEG and PNG formats, enabling WebP conversion can significantly reduce the image size and increase transmission speed.AnQiCMS supports automatic conversion to WebP format during image upload, which is an important step for image optimization.
  • Whether to automatically compress large images: Turn on this feature and set a reasonable width (such as 800px) to avoid uploading the original size of the image, which can reduce the file size.

These settings do not directly implement lazy loading, but they ensure that even if the images need to be loaded, their file size is optimal, and they complement the lazy loading technology.

Step 2: Modify the template to support lazy loading of property conversion

AnQiCMS uses a template engine syntax similar to Django. The system provides for images inserted in the document content,archiveDetailLabel to render document details. To implement lazy loading for these images, we need to callContentfield, usinglazyparameter to specify the imagesrcthe alternative name of the property.

Assuming your lazy loading JavaScript library expects images to usedata-srcproperties instead ofsrcto store the actual image address, then in your article detail template file (usually{模型table}/detail.htmlIn or customize the document template), find the tag to render the document content and make the following modification:

{# 假设archiveContent变量存储了文档的内容 #}
{% archiveDetail archiveContent with name="Content" lazy="data-src" %}
{{archiveContent|safe}}

here,lazy="data-src"The parameter will tell AnQiCMS's template engine to render in the tagarchiveContentof<img src="...">when the tag is rendered,srcattribute renamed todata-srcwhilesrcThe property itself may be set to empty or a placeholder image (the specific behavior depends on the internal implementation of AnQiCMS, but the core is that the real URL is transferred). At the same time,|safeThe filter is required to ensure that HTML content is parsed correctly and not escaped.

Images in non-document content areas (such as list page thumbnails, category banner images, etc.)

If your list page (such as{模型table}/list.html) or other templates directly use{{item.Thumb}}/{{item.Logo}}The image will display, and these images will not be applied automaticallylazyThe parameter. You need to manually changesrcThe property todata-srcand can add a unified CSS class name for front-end JavaScript to identify and handle them.

For example, in a loop of document lists:

{% archiveList archives with type="page" limit="10" %}
    {% for item in archives %}
    <li>
        <a href="{{item.Link}}">
            <img data-src="{{item.Thumb}}" alt="{{item.Title}}" class="lazyload-image"> {# 手动改为data-src并添加类名 #}
        </a>
        <h5>{{item.Title}}</h5>
    </li>
    {% endfor %}
{% endarchiveList %}

Here, we added a class to all images that need lazy loadinglazyload-imagefor easy selection by JavaScript later.

Step 3: Introduce the front-end JavaScript lazy loading library

The AnQiCMS template system is responsible for preparing image properties, but the actual lazy loading logic needs to be implemented by the front-end JavaScript.You need to choose a lightweight lazy loading library and include it in your template.Modern browsers support nativelyIntersection ObserverAPI, you can use it to write simple lazy loading logic without relying on third-party libraries.

Generally, you would place this JavaScript code in the common header file of the template (such asbase.html）的<head>or within a tag if you want to start observing quickly or</body>Before the tag (if you want to execute after the DOM is loaded).

Here is an example of usingIntersection ObserverA simple JavaScript example to implement lazy loading:

<script>
document.addEventListener("DOMContentLoaded", function() {
    // 选择所有带有data-src属性的图片，以及带有lazyload-image类的图片
    const lazyImages = document.querySelectorAll('img[data-src], .lazyload-image');

    if ('IntersectionObserver' in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src; // 将data-src的值赋给src
                    lazyImage.removeAttribute('data-src'); // 移除data-src属性
                    lazyImage.classList.remove('lazyload-image'); // 移除辅助类名
                    lazyImageObserver.unobserve(lazyImage); // 停止观察已加载的图片
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for older browsers (可选，此处简化为直接加载)
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute('data-src');
            lazyImage.classList.remove('lazyload-image');
        });
    }
});
</script>

This code will:

  1. Wait for the page DOM content to load.
  2. Find all elements withdata-srcproperties<img>tags, as well as those we manually addedlazyload-imageclass<img>.
  3. If the browser supportsIntersection Observer, then create an observer to monitor these images.
  4. When the image enters the visible area, it willdata-srcthe value tosrcand then removedata-srcattributes andlazyload-imagethe class and stop observing the image.
  5. For those that do not supportIntersection ObserverAn outdated browser, provide an alternative solution (as shown in the example, it is loaded directly, you can also use other compatibility libraries).

Test and verify

After completing the above configuration, you can open your website and verify it through the browser's developer tools:

  1. Open Developer ToolsPress in Chrome, Firefox, and other browsersF12to open the developer tools.
  2. Switch to the "Network" (Network) tab.This will display all resources loaded on the page.
  3. Filter image resourcesIn the Network tab, select the 'Image' (Img) or 'Media' filter.
  4. Scroll the page: Observe the loading of image resources. You will find that only when the image is about to enter or has already entered your screen's visible area, the corresponding image file will appear in the list of network requests, rather than all being requested when the page is initially loaded.

If everything goes well, the images on your AnQiCMS website have successfully achieved lazy loading effects.

Summary

By combining AnQiCMS flexible template tags with front-end JavaScript, implementing lazy loading of images is not complicated.This not only effectively improves the website's loading speed and user experience, reduces unnecessary bandwidth consumption, but also greatly benefits the website's SEO performance.Remember, the image format conversion and compression on the backend is a cherry on top, while the template inlazy="data-src"The clever application and the cooperation with front-end lazy loading JavaScript are the core of image 'on-demand loading'.

Frequently Asked Questions (FAQ)

1. Why did I set up in the AnQiCMS templatelazy="data-src"and the image still loaded immediately?

AnQiCMS'lazyThe parameter is only responsible for the image tag'ssrcattribute renamed todata-srcetc., it does not itself