如何解决当由动态JSON数据驱动时,LazyLoading无法生效 在Devtools中返回的标记显示延迟加载有效延迟加载 app.js JSON数据 html 在app.js中实现延迟加载
我有几个要通过Verlok lazyload.js实现的项目。这些只是几个例子。
首先
一个https://projects.jonniegrieve.co.uk/php_website/
该项目已设置LazyLoading并按照我期望的方式运行。 data-src属性直接从LazyLoad.js加载。在ChromeDevTools的“网络”标签中对此进行了验证。
在Devtools中返回的标记显示延迟加载有效。
<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
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",// ... more custom settings?
//threshold: 1472,});
第二个项目却大不相同。
https://www.jonniegrieve.co.uk/assets/project_status_images/index.html
我正在使用JavaScript来遍历并使用JSON和jQuery的getJSON()
方法检索图像数据。
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数据
{
"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",{
//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>
在app.js中实现延迟加载
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",// ... more custom settings?
//threshold: 1472,});
没有控制台/ JavaScript错误返回到控制台。标记动态地注入DOM时,延迟加载有其固有的功能吗?不能用JSON数据处理吗?与仅使用标记来编辑数据相比,对我来说,管理数据要容易得多。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。