Image not displaying because of data-state="loaded" missing on img tag.

jarey

In nodebb-plugin-ingore-users i load the post content in a hidden div ".original-content" when that contet is written by a user that the logged in user is ignoring. When that users decides he wants to stop ignoring the user, the content swaps from .original-content (that its hidden) to .content. In previous versions of nodebb this change was enought, and if post content had an image, it showed propperly.

Now this fails, as i can see, because the img tag does not have the attribute data-state="loaded" so theres a css rules that hides the visibility of the image.

When i switch the post content my img is in the html but does not show because the tag is like:
<img src="SRC img" alt="alt text" class=**"img-responsive img-markdown**">

If i reaload the page, the img is shown correctly, so i suppose theres a piece of script client side that manage the img loading inside .content class,and that puts the attr data-state on each img tag.

So two questions:

1: Is this expected behaviour? And if it is, is there a way i can trigger same behaviour on my plugin when swapping post contents?
2: Is there a way i can parse the post content client side with nodebb core, in order to be processed by the other plugins that might do things with post content client side? For example poll plugin, spoilers etc.? (so when i show hidden posts, the content is processed again and that plugins elements should be visible in the post).

Thanks in advance.

julian

Sure @jarey. This is code that hides images on load until they are scrolled into view. If you want to manually trigger this effect (for images in the viewport), do this:

require(['forum/topic/posts'], function(posts) {
    posts.loadImages();
});

jarey

@julian thanks a lot! And for the second question, is there any way to do it?

Thanks again.

EDIT (just to clarify, in order to be helpfull for anyone in the future): Since my image, didn't had the data-state="unloaded" (in fact id didn't have the data-state at all on the img tag) i had to first, use
posts.unloadImages(post); an then posts.loadImages(); to get the image loaded. That's because posts.loadImages() only searches for data-state="unloaded", posts.unloadImages. gets all images in the post provided without the class .not-reponsive and puts the data-state="unloaded" in each img tag.