Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

What's wrong with my lazy loading?

Hi all,

I thought together we might be able to work out this problem with lazy loading. For practice, I'm trying to apply some vanilla lazyloading to a group of images I'm loading dynamically with jQuery and JSON.

https://www.jonniegrieve.co.uk/all-projects.html

To do the lazy loading I'm trying to apply the solution from Verlok on GitHub. https://github.com/verlok/vanilla-lazyload

Here's how I've done it

    //lazyload        
    var lazyLoadInstance = new LazyLoad({
        // Your custom settings go here
        container: document.querySelector(".all"),
        //use_native: true, // <-- there you go -->
        elements_selector: document.querySelector("all_projects_list"),
        threshold: 900

    });

    lazyLoadInstance.update();

jQuery.getJSON('assets/data/project-list.json', function(photoData) { 


    //select project count
    let project_count = document.getElementById("project_count");
    let count = "( " + photoData.projects.length + " )";

    project_count.textContent = count;

    let itemAll = photoData.projects.length;
    console.log(photoData.projects.length);

    for (let i=0; i < itemAll; i++) { 

        //successful delivery of class and image URL    - uses data-src and/or src attributes for image element        
        jQuery(`<a href="${photoData.projects[i].project_url}" target="blank">
            <img 

            ${photoData.projects[i].img_type_data}="${photoData.projects[i].img_url}" 
            class="site-images lazy" alt="${photoData.projects[i].project_alt}" 
            title="${photoData.projects[i].project_alt}" 
            tabindex="" /></a>`
        ).appendTo('.all');     

   }

});

My markup.

 <main class="main-content">

        <article id="all-projects" tabindex="0">

            <h2>All Projects  <span id="project_count" role="project_count"> 0 </span> <!----> </h2>  

            <div class="all lazy" id="all_projects_list" role="all projects list">

                <!-- -->                    

            </div>

        </article>

    </main>

The json data I'm using looks like this. 

{ "featured_projects": [ 
        {
            "project_name": "Auto Cleanse North East",
            "project_url": "http://www.autoc.co.uk/",
            "img_url": "img/featured/autocleansenortheast.jpg",
            "project_alt": "Go to Auto Cleanse North East",
            "project_type": "Website",
            "project_status": "Complete",
            "status": true
        }, {
            "project_name": "Kevin Mangles: Entertainer",
            "project_url": "https://www.kevinmangles-magician.com/",
            "img_url": "img/featured/kevinmangles.jpg",
            "project_alt": "Go to Kevin Mangles",
            "project_type": "Website",
            "project_status": "Complete",
            "status": true
        }  

        // snip

]
}

I've been trying to do this for weeks now, possibly even months and I'm sure I've implemented it before.

I'm on Windows, using Chrome 84 and the very latest release of jQuery and lazyload.

Adam N
Adam N
70,280 Points

Have people been able to help you out with non-Treehouse stuff in the past? Seems like Stackoverflow would be better for these type of questions.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Adam,

Apologies, I meant to come back to this sooner,

Yes I have. I suppose I will try stackoverflow again but I have more success looking for things on there from a google search than actually asking a question there. It’s a such a minefield.

But it can’t hurt to try I suppose. I do like the friendly nature of the Treehouse community though. 🙂