Implementing image lazy loading for article content in AnQi CMS is a key element for improving 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, and images, as an important part of web content, are often the main factors causing the page to be bulky and slow to load.The Anqi CMS is a content management system that focuses on efficiency and lightness, it does not come with built-in client lazy loading scripts, but it provides powerful template parsing capabilities, allowing us to flexibly and efficiently integrate third-party lazy loading solutions, thus realizing the on-demand loading of image resources.
The core idea of lazy loading images is that the real resources of the image start to load 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 first screen rendering, but also saves bandwidth for users, especially in mobile network environments, with particularly significant effects.
Support of Anqi CMS for image lazy loading
The AnQi CMS template engine provides a very convenient mechanism to cooperate with image lazy loading. When we render document content on the article detail page, we can usearchiveDetailTag to output the documentContentField. This tag supports a namedlazyattribute. By setting this attribute, Anqi CMS will parse the content of the article in the background when<img>tag is used, and the image'ssrcProperty is converted to other custom properties (such asdata-srcThus preventing the browser from downloading these images at initial load.
The specific usage is, in your template file, call the content of the article.archiveDetailWhen setting the tag, you can do it like this:{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}. Here,lazy="data-src"Tell AnQi CMS to replace all contents<img>label'ssrcattribute is replaced withdata-src. Please 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 essential, it ensures that the 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 on the market, such as the Intersection Observer API based on native JavaScript (for modern browsers), or some mature third-party libraries likelazysizes/jQuery Lazy LoadChoose which library depends on the target browser compatibility, project complexity, and personal preference of your website.
After choosing a lazy loading library, you need to integrate it into the AnQi CMS template. Usually, JavaScript files are stored in the AnQi CMS static resources directory/public/static/According todesign-convention.mdthe agreement, throughbase.htmlor by introducing a specific page template file. For example, you can placebase.htmlof<head>or</body>before the tag, through<script src="{% system with name="TemplateUrl" %}/js/your-lazyload-script.js"></script>This is the 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.
Next, it is to modify the Anqi CMS template file. In your article detail page (usually{模型table}/detail.htmlor a custom document template), find the output article contentContentwhere. Use the previously mentionedarchiveDetaillabel'slazyproperty to handle images. For example, if your lazy loading library needs tosrcReplacedata-originalthen you should write it like this:{% archiveDetail archiveContent with name="Content" lazy="data-original" %}{{archiveContent|safe}}. This way, AnQi CMS will automatically convert the article content in the generation of page HTML<img src="path/to/image.jpg">to<img data-original="path/to/image.jpg">to prepare for the takeover of the lazy loading library.
Finally, make sure your lazy-loaded JavaScript code correctly listens for page scroll or element viewport entry events, and loads imagesdata-srcAssign the actual image address to thesrcProperty. For example, with a simple Intersection Observer, your JavaScript code may need to iterate over all elements that includedata-srcproperties<img>Label, and create an Observer instance. When the image enters the viewport,data-srcthe value tosrcand remove.data-srcAttribute, thus triggering image loading.
Test and optimize
After completing the above configuration, be sure to thoroughly test on different browsers and devices to verify that the lazy loading of images works normally.Use the browser's developer tools, especially the 'Network' tab, to check if images are loaded only when needed.At the same time, you can also pay attention to some other image optimization strategies to further improve the performance of the website.The "Content Settings" feature of AnQi CMS backend (see reference tohelp-setting-content.md) Provided options such as 'Enable Webp image format', 'Automatically compress large images', and more. These features can be combined with lazy loading to reduce image size on the server side,协同with client-side lazy loading to achieve optimized image loading effects.
By reasonably utilizing the template features of AnQi CMS and third-party lazy loading technology, we can effectively improve the loading speed of the website, enhance user experience, have a positive impact on SEO, and make our content more efficiently reach and serve readers.
Frequently Asked Questions (FAQ)
1. Why did I set it in the template?lazy="data-src"Do the images still load immediately?
The most common reason for this situation is that you have only configured in the Anqi CMS template.lazyThe attribute does not introduce and enable an actual JavaScript lazy loading library in the front-end page. Anqi CMS'lazyThe attribute is used to place HTML in<img>label'ssrcproperties todata-srcCustom properties to prevent the browser from loading the default behavior. But truly taking over thisdata-srcThe property, and the logic of loading the image when it enters the viewport, needs to be completed by the JavaScript library you introduce on the front-end.Make sure you have correctly introduced and initialized the lazy loading JavaScript library you have chosen.
2. Does AnQi CMS have a built-in JavaScript script for lazy loading images?
The AnQi CMS itself does not provide built-in JavaScript scripts for lazy loading images. It provides a powerful template engine mechanism that allows developers toarchiveDetaillabel'slazyAttribute, flexibly transfers images in the article contentsrcAttribute converts to other custom attributes (such asdata-srcThus, it provides convenience for integrating any third-party lazy loading library.This means you need to choose and integrate a client-side JavaScript lazy loading library that suits your project requirements.
3. Can I implement lazy loading of images in other places of the AnQiCMS template (such as the Banner, thumbnail list) in addition to the article content?
archiveDetaillabel'slazyThe attribute is specifically designed for articlesContentImages within the field are converted. For Banner images, thumbnail lists, or images directly output through template tags (such astag-/anqiapi-other/3498.html/tag-/anqiapi-archive/141.html) they are usually output directly through<img>label'ssrcThe attribute output. To implement lazy loading in these places, you need to manually modify the template code, bysrcattribute is replaced withdata-srcor the attributes required by other lazy loading libraries, and in the corresponding<img>Add the class name or marker required for lazy loading libraries on the tag. Then, your front-end JavaScript lazy loading library can uniformly handle these images.