黑马程序员技术交流社区

标题: 【上海校区】jquery.lazyload 懒加载失效，图片无法加载 [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-8-2 09:35
标题: 【上海校区】jquery.lazyload 懒加载失效，图片无法加载

用Freemarker写的前端ftl页面，需要将之前.ftl页面都改成H5页面，对于Freemarker这种在页面模板里面直接与后台进行交互的坑爹用法，我还需要根据Freemarker的语法将页面模板的里面进行的判断都转成js，然后与后台的交互需要转成ajax，这就需要前后端配合修改。比如：

• 
  
  <!-- 幻灯片样式开始 -->
  
  
• 
  
  <#assign advPositionTag = newTag("advTag") />
  
  
• 
  
  <#assign topPosition = advPositionTag("{'apKey':'topbanner'}") />
  
  
• 
  
  <div id="slideBox" class="slideBox">
  
  
• 
  
      <div class="hd">
  
  
• 
  
          <ul class="smallUl"></ul>
  
  
• 
  
      </div>
  
  
• 
  
      <div class="bd">
  
  
• 
  
          <#if topPosition?? && topPosition!''>
  
  
• 
  
          <#if topPosition.advList ??&& topPosition.advList!=null>
  
  
• 
  
              <#assign apList = topPosition.advList />
  
  
• 
  
              <ul>
  
  
• 
  
                  <#list apList as advs >
  
  
• 
  
                      <li>
  
  
• 
  
                          <a href="${advs.advUrl}" target="_blank">
  
  
• 
  
                              <div style="background:url(${imgServer}${advs.resUrl}) no-repeat; background-position:center;background-size:100% 100%; width:100%; height:456px;"></div>
  
  
• 
  
                          </a>
  
  
• 
  
                      </li>
  
  
• 
  
                  </#list>
  
  
• 
  
              </ul>
  
  
• 
  
          </#if>
  
  
• 
  
          </#if>
  
  
• 
  
      </div>
  
  
  

这一段代码就是Freemarker语法，边渲染前端页面边与后台进行方法请求advPositionTag()，这样会导致页面加载比较慢而且这种前后端没有分离的话会影响之后进行的业务逻辑。每个页面都需要进页面的时候先ajax请求后台的接口，返回了数据后再在js里面进行页面渲染，上面的代码就需要改成：

• 
  
  $(function () {
  
  
• 
  
          //页面初始化加载数据
  
  
• 
  
          var ajaxData = {
  
  
• 
  
              type: "get",
  
  
• 
  
              url: "/indexdata",
  
  
• 
  
              data: {},
  
  
• 
  
              dataType: "json",
  
  
• 
  
          },
  
  
• 
  
          ajaxfunction(ajaxData,function(data){
  
  
• 
  
              //返回成功后！
  
  
• 
  
              if (data.result == 1) {
  
  
• 
  
                  //幻灯片样式
  
  
• 
  
                  var slideBox_html = '';
  
  
• 
  
                  if(data.topPosition && data.topPosition != ''){
  
  
• 
  
                      if(data.topPosition.advList && data.topPosition.advList!=null){
  
  
• 
  
                          var apList = data.topPosition.advList;
  
  
• 
  
                          slideBox_html += '<ul>';
  
  
• 
  
                          $(apList).each(function(advs_index,advs){
  
  
• 
  
                              slideBox_html += '<li>';
  
  
• 
  
                                  slideBox_html += '<a href="'+advs.advUrl+'" target="_blank">';
  
  
• 
  
                                      slideBox_html += '<div style="background:url('+imgUrl+advs.resUrl+') no-repeat; background-position:center;background-size:100% 100%; width:100%; height:456px;"></div>';
  
  
• 
  
                                  slideBox_html += '</a>';
  
  
• 
  
                              slideBox_html += '</li>';
  
  
• 
  
                          });
  
  
• 
  
                          slideBox_html += '</ul>';
  
  
• 
  
                      }
  
  
• 
  
                      $(".bd").html(slideBox_html);
  
  
• 
  
                      //加载幻灯片
  
  
• 
  
                      jQuery(".slideBox").slide({titCell: ".hd ul", mainCell: ".bd ul", autoPlay: true, autoPage: true});
  
  
• 
  
                  }
  
  
• 
  
          }else{
  
  
• 
  
                  layer.msg(data.msg);
  
  
• 
  
              }
  
  
• 
  
          });
  
  
• 
  
  });
  
  
  

这里的ajaxfunction进行了一次封装就不多做说明了。

好了，切入正题，按照之前的Freemarker语法引入的jquery.lazyload 没问题可以实现懒加载，但是经过前后端分离之后，引入的jquery.lazyload就失效了，后来找到原因，需要把懒加载初始化写在ajax里面页面渲染后就没问题，也就是：

• 
  
  $(".bd").html(slideBox_html);
  
  
• 
  
  //初始化懒加载
  
  
• 
  
  $("img").lazyload({effect:"fadeIn"});
  
  
  

页面请求多个接口的时候，在需要初始化懒加载的ajax里面都要加上初始化的这段代码就行了。

---

作者: 不二晨    时间: 2018-8-2 17:35
奈斯，棒棒哒奈斯，棒棒哒

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2