Javascript image preload function

1

I have a javascript preload function that will show a smaller image that is blurred if the large image does not load yet. My problem is that it only works on the first loop of my blog post’s list that is displayed in index.html. The other posts dont run the function.

2

that isn’t a lot of info to help others troubleshoot.

I would guess you didn’t follow the same convention in other places. For instance, you probably have to use certain class names or ID names or something for it to work. Or maybe you are not properly loading the JS on the other pages. Is there an error in the Inspector/Console?

If you give links to your repo and or your live site, as well as to the preload function maybe someone will look at it.

3

sorry for the vagueness. Basically I have this function

var load = document.getElementsByClassName('feature-image')[0];
if (!hasClass(load, "preload")) 
{
 addClass(load, "preload");
} 
else 
{
    removeClass(load, "preload");
}

var load1 = document.getElementsByClassName('feature-image-small')[0];
if (!hasClass(load1, "preload")) 
{
    addClass(load1, "preload");
} 
else 
{
    removeClass(load1, "preload");
}

and this is the html

<ul class="posts-list">
{% for post in paginator.posts %}
	<div class="posts-container">
        {% assign foundImage = 0 %}
		{% assign images = post.content | split:"<img " %}
		{% for image in images %}
		{% if image contains 'src' %}
		{% if foundImage == 0 %}
		{% assign html = image | split:"/>" | first %}
		<img class="featured-image preload" {{ html }} />
		{% assign foundImage = 1 %}
		{% endif %}
		{% endif %}
		{% endfor %}

		<img class="featured-image-small preload" src="{{site.baseurl}}/assets/img/{{post.preload}}" />
    </div>
{% endfor %}
</ul>

it only works on the first iteration of the posts loop.

4

what is the resulting html?

I’d probably output the foundimage value in the loop to see what it is doing.

5

the html is fine, it just outputs the first image on the blog posts and displays it in the index.html loop for showing posts. the javascript is just working on the first iteration.

6

ah, gotcha.

Who wrote the JS? did you create it on your own or are you using it from another source? Why at the end of the var’s does it have [0]?

I know very little JS so won’t be able to help any further I don’t think. but [0] could be just looking at the first instance of the matching element?

1 Like
7

hmmm, must be that. ill try to change this format. thanks for the input.

8

There are a few issues with this js snippet. The first one @rdyar has pointed out - [0] notation means access to the first element of an array (since geElementsByClassName function returns all matching elements). So remove that.

The other thing, since the function returns an array of elements, you need to add or remove preload class to an every element in the array and therefore you need a for loop statement for that.

Something like that should work out:

var load = document.getElementsByClassName('feature-image');
for (var i = 0; i < load.length; i++)
{
    if (!hasClass(load[i], "preload")) { addClass(load[i], "preload"); } 
    else { removeClass(load[i], "preload"); }
}

var load1 = document.getElementsByClassName('feature-image-small');
for (var i = 0; i < load1.length; i++)
{
    if (!hasClass(load1[i], "preload")) { addClass(load1[i], "preload"); } 
    else { removeClass(load1[i], "preload"); }
}

and that should be it… :tada:

Hope it helps.

1 Like
9

@juscuizon did you get it working?

10

I will check later and get back to you. Appreciate the info @pabloduo

11

@pabloduo, got it to work mate! Thanks for the snippet.

12

@juscuizon yay! so glad it was what you were looking for! :smile:

1 Like