How to use the `archiveDetail` tag to implement lazy loading (LazyLoad) for image content in AnQiCMS?

In AnQiCMS, the implementation of content image lazy loading mainly relies onarchiveDetailA very practical parameter to complete in a tag.This feature aims to optimize website performance and enhance user experience, especially when there are many images in the article content, it can significantly reduce the initial loading time of the page.

Understanding lazy loading and its working principle in AnQiCMS

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

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

UsearchiveDetailThe tag implements image lazy loading

To enable lazy loading for 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 for the article detail page is usually located intemplates/{你的模板目录}/{模型table}/detail.html.

Find the tag used to display the article content in your article detail template.archiveDetailIt usually looks like this:

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

To enable lazy loading, we just need to add alazyParameter, and set its value to the placeholder attribute name recognized by your frontend lazy loading library. AnQiCMS recommends usingdata-srcThis is the default or supported attribute of many mainstream lazy loading libraries.

The modified code will look like this:

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

Thislazy="data-src"The parameter will indicate that AnQiCMS should use it when generating HTML,Contentall fields in<img>Tagssrcattribute in the content withdata-srcFor example, an original image label<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 front-end JavaScript lazy loading library

It is particularly important to note,archiveDetailTagslazyParameters are just converted tosrcproperties on the backenddata-srcThe browser itself does not implement lazy loading. To truly achieve the effect of lazy loading, 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 containdata-src(or any attributes you specify) withoutsrcattributes<img>Label.
  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-srccopy the value of the attribute backsrcproperties.
  4. OncesrcThe attribute is assigned, and the browser will trigger the image loading.

You can find many excellent, lightweight front-end lazy loading libraries on the internet, such aslazysizes.js/vanilla-lazyloadSelect a library you like, and import it into your AnQiCMS template according to its documentation, usually before the tag.base.htmlthe file</body>Import it before the tag.

For example, if you choose a library namedmyLazyLoad.jsThe library, and it will automatically scandata-srcproperty, then you may need tobase.htmladd code like this:

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

Ensure the JS file path is correct, and if the library requires initialization, follow its instructions.

Summary

By using inarchiveDetailTagsContentfieldlazy="data-src"Parameters, combined with front-end JavaScript lazy loading libraries, we can easily implement the lazy loading display of article content images in AnQiCMS.This can not only effectively improve the website's loading speed and reduce the server pressure, but also provide users with a smoother browsing experience.Remember to test thoroughly after completing the settings to ensure that the lazy loading function works as expected.

Common Questions (FAQ)

  1. Why did I set it and the article list is still empty or displayed incorrectly?lazy="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 template.lazy="data-src"But you have not introduced and initialized the corresponding JavaScript lazy loading library correctly on the front-end page.lazy="data-src"Just changing the image'ssrcattribute in the content withdata-src,but the actual lazy loading logic needs to be implemented by the frontend JavaScript. Make sure your template (usually}base.htmlThe content includes a lazy loading JS library, and the library can recognize and handledata-srcproperties.

  2. Can I also implement lazy loading for images in other locations (such as thumbnails, Logos, etc.) except for the images in the article content? archiveDetailTagslazyThe parameter mainly targetsContentFields rich text image. For likeLogo/ThumborImagesSuch independent image fields, which directly output image URLs without processing through the rich text editor. To implement lazy loading for these images, you need to manually modify their HTML output, whichsrcattribute in the content withdata-src(For example}]}<img data-src="{{item.Thumb}}" alt="...">Make sure your front-end lazy loading JS library can handle these manually modified image tags.

  3. lazy="data-src"ofdata-srcCan I customize the name of this property?OK.data-srcis a commonly used placeholder property name, but you can change it according to the requirements of the frontend JavaScript lazy loading library you choose or your own preference. For example, if your lazy loading library recognizesdata-originalThen you can set the parameter aslazy="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.