JQuery to replace multiple div contents on page load

Question

I have a series of DIVs created from a PHP loop, each with the same class ('image'), that are generated with a small placeholder image to speed up the initial page load. However, once the page has finished loading I want to replace each of the divs content with the returned content from another page. This other page would render a higher quality image, unique to each DIV, and some associated metadata about the image. Essentially it would be a sort of lazy-loading.

After the PHP loop my HTML code looks like the below:

<div id='content'>
    <h1>Some title goes here</h1>
    <div id='home'>
        <div class='image' id='aaa'><img src='/placeholder.jpg'/></div>
        <div class='image' id='bbb'><img src='/placeholder.jpg'/></div>
        <div class='image' id='ccc'><img src='/placeholder.jpg'/></div>
        <div class='image' id='ddd'><img src='/placeholder.jpg'/></div>
        <div class='image' id='eee'><img src='/placeholder.jpg'/></div>
        <div class='image' id='fff'><img src='/placeholder.jpg'/></div>
    </div>    
</div>

I'm very new to JQuery and had hoped to do something like the below to then replace the contents of each DIV with the class 'image'. Essentially the idea is to take the id value from the DIVs with class 'image', parse that to the newimage.php script and then have the HTML returned from newimage.php replace the DIV content.

<script>
    var updateDivs = function(){
        var objid = $(this).attr('id');
        $("#"+objid).load("newimage.php?id="+objid);
    }
    $('.image').ready(updateDivs);
</script>

Such that after the running of the JQuery the HTML code would look like the below:

<div id='content'>
    <h1>Some title goes here</h1>
    <div id='home'>
        <div class='image' id='aaa'><span class='image-title>Image Title 1</span><span class='image-views'>10</span><img src='/img/aaa.jpg'/></div>
        <div class='image' id='bbb'><span class='image-title>Image Title 2</span><span class='image-views'>11</span><img src='/img/bbb.jpg'/></div>
        <div class='image' id='ccc'><span class='image-title>Image Title 3</span><span class='image-views'>9</span><img src='/img/ccc.jpg'/></div>
        <div class='image' id='ddd'><span class='image-title>Image Title 4</span><span class='image-views'>8</span><img src='/img/ddd.jpg'/></div>
        <div class='image' id='eee'><span class='image-title>Image Title 5</span><span class='image-views'>12</span><img src='/img/eee.jpg'/></div>
        <div class='image' id='fff'><span class='image-title>Image Title 6</span><span class='image-views'>14</span><img src='/img/fff.jpg'/></div>
    </div>    
</div>

However, after trying a few variations in JQuery code I cannot get this to work as expected. Any help would be greatly appreciated!

Answer 1

Your issue is with $(".image").ready(.. - a quick debug shows that this inside the function is the document , not the image. .ready() doesn't work this way.

.ready()

https://api.jquery.com/ready/

Specify a function to execute when the DOM is fully loaded.

The above page shows $("img").ready(handler) and states that this is equivalent to $(handler) . So .ready could be called .documentIsReady .

There doesn't seem to be a need to wait for your your placeholder to load, so you can just make your call on a normal doc.ready, passing in each image:

$(() => $('.image').each(updateDivs);

or, if you prefer:

$(function() {
   $(".image").each(updateDivs)
});