Implementing the lazy loading feature for images in article content in AnQi CMS is a key step to enhance website performance and user experience.As a website operator, I am well aware of the importance of loading speed for search engine rankings and user retention. Images, as an important part of web content, are often the main factors causing pages to be bulky and slow to load.AKe CMS is a content management system that focuses on efficiency and lightweight, but it does not have a built-in lazy loading script for the client. However, it provides powerful template parsing capabilities, allowing us to integrate third-party lazy loading solutions flexibly and efficiently, thereby implementing on-demand loading of image resources.
The core idea of lazy loading images is to start loading the real resources only when the image enters the user's viewport.This not only reduces the number of requests and data transfer during page initialization, speeds up the rendering speed of the first screen, but also saves bandwidth for users, especially in mobile network environments, where the effect is particularly significant.
[en] Support for lazy loading of images in AnQi CMS
The template engine of Anqi CMS provides a very convenient mechanism to support lazy loading of images. When we render document content on the article detail page, we can usearchiveDetailDocument tags for outputting documents.Contentfield. This tag supports a namedlazyattribute, by setting this attribute, the security CMS will parse the content of the article in the background when the<img>tag is encountered, and will display thesrcProperty is converted to other custom properties (such asdata-src), thus preventing the browser from downloading these images during the initial load.
The specific usage is to call the article content in your template file,archiveDetailWhen labeling, you can set it like this:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}Here,lazy="data-src"Inform the CMS, all content in<img>Tagssrcattribute in the content withdata-srcPlease note,data-srcIt is just an example, the actual property name needs to be determined according to the requirements of the lazy loading JavaScript library you choose. At the same time,{{archiveContent|safe}}It is indispensable, ensuring that HTML content is rendered correctly rather than as plain text.
The specific steps to implement lazy loading
Implementing lazy loading for images usually requires the following steps:
Firstly, we need to select a suitable client-side JavaScript lazy loading library. There are many excellent lazy loading libraries available for selection, such as the native JavaScript Intersection Observer API (for modern browsers), or some mature third-party libraries likelazysizes/jQuery Lazy Loadet al. The choice of library depends on the target browser compatibility of your website, the complexity of the project, and personal preference.
After you select a lazy loading library, you need to integrate it into the template of Anqi CMS. Usually, JavaScript files are stored in the static resources directory of Anqi CMS./public/static/Below, and according todesign-convention.mdthe agreement inbase.htmlor by specific page template files. For example, you canbase.htmlof<head>or</body>through the<script src="{% system with name="TemplateUrl" %}/js/your-lazyload-script.js"></script>This way to introduce your lazy loading script. At the same time, if the lazy loading library has specific CSS styles, they should also be introduced together.
Next, it's time to modify the template files of the Anqi CMS. In your article detail page (usually{模型table}/detail.htmlor a custom document template), find the output of the article contentContent[en]The place. Using the previously mentionedarchiveDetailTagslazyproperty to handle images. For example, if your lazy loading library needs to processsrcwithdata-original, then you should write it like this:{% archiveDetail archiveContent with name="Content" lazy="data-original" %}{{archiveContent|safe}}So, when the Anqi CMS generates the page HTML, it will automatically replace the article content with<img src="path/to/image.jpg">Converted to<img data-original="path/to/image.jpg">to prepare for the lazy loading library to take over.
Finally, ensure that your lazy-loaded JavaScript code correctly listens for page scroll or element entering the viewport events, and loads the imagesdata-srcAssign the real image address in 【or other custom attribute】tosrcProperties. For example, with a simple Intersection Observer, your JavaScript code might need to iterate over all elements containingdata-srcattributes<img>Label them and create an Observer instance. When the image enters the viewport,data-srctosrcand removedata-srcattribute to trigger the image loading.
Test and optimize
After completing the above configuration, make sure to thoroughly test on various browsers and devices to verify that the lazy loading of images is working properly.Use the browser's developer tools, especially the 'Network' tab, to check if the image is loaded only when needed.At the same time, you can also pay attention to some other image optimization strategies to further improve website performance.help-setting-content.mdProvided options such as 'Whether to enable Webp image format', 'Whether to automatically compress large images', etc., these features can be配合 with lazy loading, reduce the image size on the server side, and work协同 with client-side lazy loading to achieve an optimized image loading effect.
By reasonably utilizing the template features of the AnQi CMS and third-party lazy loading technology, we can effectively improve the website's loading speed, enhance user experience, and have a positive impact on SEO, making our content more efficiently reach and serve readers.
Common Questions (FAQ)
1. Why does the image still load immediately when I set it in the template?lazy="data-src"?
The most common reason for this situation is that you have only configured in the Anqi CMS template.lazyThe attribute, but has not introduced and enabled an actual JavaScript lazy loading library in the front-end page. The Anqi CMS'slazyThe attribute's function is to<img>TagssrcThe attribute converts todata-srcPrevent the browser from loading by default through custom attributes, but truly taking control of thisdata-srcThe logic for loading the attribute, and when the image enters the viewport, needs to be completed by the JavaScript library you introduce on the front end.Make sure you have correctly imported and initialized the lazy loading JavaScript library you have chosen.
2. Is the JavaScript lazy loading script for images built into the AnQi CMS?
The AnQi CMS itself does not provide a built-in JavaScript lazy loading script for images. It offers a powerful template engine mechanism that allows developers toarchiveDetailTagslazy【en】Property, flexibly places images in the article contentsrcProperty can be converted to other custom properties (such asdata-srcThus, it provides convenience for integrating any third-party lazy loading library.This means you need to select and integrate a suitable client-side JavaScript lazy loading library for your project needs.
3. Can I implement lazy loading for images in other places of the AnQiCMS template (such as Banners, thumbnail lists)?
archiveDetailTagslazyThe property is specifically for articlesContentThe image within the field is converted. For Banner images, thumbnail lists, or images output directly through template tags (such astag-bannerList.md/tag-archiveList.md), they are usually output directly through<img>TagssrcThe attribute output. To implement lazy loading in these places, you need to manually modify the template code, tosrcattribute in the content withdata-srcor other lazy loading libraries required properties, and in the corresponding<img>Add the class name or marker required for lazy loading library on the tag. Then, your frontend JavaScript lazy loading library can uniformly handle these images.