How to use the `archiveDetail` tag to implement lazy loading (LazyLoad) of images in AnQiCMS?

The implementation of lazy loading of content images in AnQiCMS mainly utilizesarchiveDetailA very practical parameter to complete. This feature aims to optimize website performance and enhance user experience, especially when there are many images in the article content, which can significantly reduce the initial page loading time.

Understanding the principle of lazy loading and its operation in AnQiCMS

Lazy loading (LazyLoad) is a common web optimization technique that refers to the deferral of loading non-critical resources on a webpage (such as large images at the bottom of the page) until these resources appear in the user's current viewport.The benefits of doing this are obvious: the page loads faster, bandwidth consumption is less, and users can see the main content of the page faster.

In AnQiCMS, article content is usually rendered througharchiveDetaillabel'sContentfield. ThisContentThe field contains all the rich text content of the article body, including the images. AnQiCMS is thisContentThe field provides a built-in lazy loading support parameter, which allows us to indicate how the system should handle these images at the template level.

UsearchiveDetailThe tag implements image lazy loading.

To enable lazy loading of images in the article content, we need to modify the template file of the article detail page. According to the template design conventions of AnQiCMS, the template of the article detail page is usually locatedtemplates/{你的模板目录}/{模型table}/detail.html.

In your article detail template, find the tag used to display the article contentarchiveDetailIt usually looks like this:

{% archiveDetail archiveContent with name="Content" %}{{archiveContent|safe}}{% endarchiveDetail %}

To enable lazy loading, we just need to add a tag to thelazyParameter, and set its value to the attribute name recognized by your front-end lazy loading library. The AnQiCMS document recommends usingdata-srcThis is the default or supported attribute of many mainstream lazy loading libraries.

The modified code will be like this:

{% archiveDetail archiveContent with name="Content" lazy="data-src" %}{{archiveContent|safe}}{% endarchiveDetail %}

Thislazy="data-src"The parameter will indicate that AnQiCMS will use it when generating HTML.ContentAll fields in<img>label'ssrcattribute is replaced withdata-src. For example, an original image tag.<img src="https://en.anqicms.com/uploads/image.jpg" alt="描述">After processing by AnQiCMS, it will become<img data-src="https://en.anqicms.com/uploads/image.jpg" alt="描述">.

Integrate the front-end JavaScript lazy loading library

It should be noted that,archiveDetaillabel'slazyThe parameter is only processed in the back-endsrcThe attribute is converted todata-src. The browser itself does not implement lazy loading. To truly achieve lazy loading effects, you still need to introduce a JavaScript lazy loading library on the front end.

The working principle of these front-end libraries is usually:

  1. They scan all elements on the page that contain:data-src(or other specified properties) without:srcproperties<img>.
  2. They listen to the user's scroll events.
  3. When these images are about to enter or have already entered the user's visible area, the JavaScript library willdata-srcthe value of thesrcProperty.
  4. Oncesrcthe attribute is assigned, and the browser will trigger the loading of the images.

You can find many excellent, lightweight frontend lazy loading libraries on the Internet, such aslazysizes.js/vanilla-lazyloadChoose a library you like and integrate it into your AnQiCMS template according to its documentation, usually before thebase.htmlthe file</body>tag.

For example, if you choose a library namedmyLazyLoad.jsa library, and it will automatically scandata-srcattribute, then you may need tobase.htmladd code similar to this:

<script src="{% system with name='TemplateUrl' %}/js/myLazyLoad.js"></script>
<script>
  // 如果你的懒加载库需要初始化，在这里进行
  // 例如：LazyLoad.init();
</script>
</body>
</html>

Make sure the JS file path is correct, and if the library needs initialization, follow its instructions.

Summary

By adding inarchiveDetaillabel'sContentUsed in fieldlazy="data-src"The parameter, combined with the front-end JavaScript lazy loading library, allows us to easily implement the lazy loading display of article content images in AnQiCMS.This can not only effectively improve the loading speed of the website, reduce the server pressure, but also provide users with a smoother browsing experience.Remember to do more testing after completing the settings to ensure that the lazy loading feature works as expected.

Frequently Asked Questions (FAQ)

  1. Why did I setlazy="data-src"But the image still loads immediately, and there is no lazy loading effect?This is usually because you have only configured in the AnQiCMS templatelazy="data-src"but have not introduced and initialized the corresponding JavaScript lazy loading library correctly on the front-end page.lazy="data-src"Just to display the image'ssrcattribute is replaced withdata-srcAnd the actual lazy loading logic needs to be implemented by the frontend JavaScript. Make sure your template (usuallybase.html) includes a lazy loading JS library, and the library can recognize and handledata-srcProperty.

  2. Can I implement lazy loading for images in other locations (such as thumbnails, Logo, etc.) as well? archiveDetaillabel'slazyThe parameter is mainly for itsContentThe field contains rich text images. For similarLogo/ThumborImagesSuch independent image fields, which directly output image URLs without going through the rich text editor. To implement lazy loading for these images, you need to manually modify their HTML output, bysrcattribute is replaced withdata-src(For example)<img data-src="{{item.Thumb}}" alt="...">Ensure that your front-end lazy loading JS library can handle these manually modified image tags.

  3. lazy="data-src"ofdata-srcCan the name of this property be customized?Can.data-srcIs a commonly used placeholder attribute name, but you can change it according to the requirements of the front-end JavaScript lazy loading library you choose or your own preference. For example, if your lazy loading library recognizesdata-originalThen you can set the parameter tolazy="data-original"The key is that the attribute names generated by AnQiCMS should be consistent with the attribute names expected by your front-end JS library.