javascript - LazyLoading not taking effect when driven by dynamic JSON data
Get the solution ↓↓↓I have several projects that I'm trying to implement with Verlok lazyload.js. These are just a couple of examples.
Firstly
One https://projects.jonniegrieve.co.uk/php_website/
This project has LazyLoading set up and functioning the way I would expect it. The data-src attributes are loaded directly from LazyLoad.js. Which is verified in the Network tab of ChromeDevTools.
markup returned in Devtools showing lazyloading in effect.
<li>
<img data-src="img/drama/hacksaw.jpg" class="media-img lazy loaded" title="Hacksaw Ridge (2011)" src="img/drama/hacksaw.jpg" data-was-processed="true">
<a href="#" class="sub-content-title">Hacksaw Ridge (2009)</a>
</li>
Lazyloading
//lazyloading
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
// ... more custom settings?
//threshold: 1472,
});
The markup is hardcoded in amongst a PHP based site.
This second project however is very different.
https://www.jonniegrieve.co.uk/assets/project_status_images/index.html
I'm using JavaScript to loop through and retrieve the image data using JSON and jQuery'sgetJSON()
method.
app.js
jQuery.getJSON('data/project-list.json', function(photoData) {
let itemAll = photoData.projects.length;
console.log(photoData.projects.length);
//display data count to browser
project_count.textContent = "( " + photoData.projects.length + " )";
for (let i=0; i < itemAll; i++) {
jQuery(`
<li>
<a href="${photoData.projects[i].project_url}" target="blank">
<img src="${photoData.projects[i].img_url}" class="site-images lazy" alt="${photoData.projects[i].project_alt}" title="${photoData.projects[i].project_alt}" tabindex="" />
</a>
<div class="project_info">
<div class="${photoData.projects[i].project_status }"></div>
<div class="project_name">${photoData.projects[i].project_name }</div>
</div>
</li>`).appendTo('.project-status-data');
}
});
JSON data
{
"projects": [
{
"project_name": "Value",
"project_url": "value 2",
"img_url": "value 3",
"feat_img_url": "value 4",
"project_alt": "value 5",
"project_type": "value 6",
"project_status": "value 7",
"status": true,
"img_type": "src",
"img_type_data": "data-src"
}, {
"project_name": "Value",
"project_url": "value 2",
"img_url": "value 3",
"feat_img_url": "value 4",
"project_alt": "value 5",
"project_type": "value 6",
"project_status": "value 7",
"status": true,
"img_type": "src",
"img_type_data": "data-src"
}, {
//more data
}
]
}
html
<li>
<a href="https://projects.jonniegrieve.co.uk/ajax_project" target="blank">
<img src="https://projects.jonniegrieve.co.uk/assets/img/list/ajax_project.png" class="site-images lazy" alt="Go to Ajax Project Website" title="Go to Ajax Project Website" tabindex="">
</a>
<div class="project_info">
<div class="complete"></div>
<div class="project_name">Ajax Project</div>
</div>
</li>
implement lazyloading in app.js
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
// ... more custom settings?
//threshold: 1472,
});
There are no console/JavaScript errors returned into the console. Is there something inherent about lazyloading that it doesn't work when the markup is injected into the DOM dynamically? Can it not be handled with JSON data? It's easier for me to manage the data than by just working with markup to edit the data.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: zsh: command not found: php
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.