当由动态JSON数据驱动时，LazyLoading无法生效 在Devtools中返回的标记显示延迟加载有效延迟加载 app.js JSON数据 html 在app.js中实现延迟加载

编程问答 2022-06-08

问题描述

我有几个要通过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,});

标记是在基于PHP的网站中硬编码的。

第二个项目却大不相同。

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 (将#修改为@）

getjsongetjsongetjsonhtmljavascriptjson