Question

我在ajax中加载了一个带有Bootstrap轮播的模态/ popin，其中每个幻灯片都是（不是关于延迟加载的许多问题中的图像），而是来自各种社交网络的{if facebook { {3}}，instagram，...）。

问题在于，当我点击提示模态的按钮时，所有幻灯片内容都会被加载，也就是说15到20个oembeds（每个都加载内容文本，图像和javascript ......）。

我想要聪明一点，只有＆＃34;懒惰负载＆＃34;滑动滑动甚至更聪明3幻灯片3幻灯片。

我还提到我正在使用twitter和scrollMonitor的信息。但我宁愿使用Bootstrap幻灯片事件触发每张幻灯片的幻影/加载或任何你想要的建议。

我在rails上使用ruby作为后端语言

oEmbed的网址会以编程方式更改，因为它们是从管理后台输入的，并且会在每个文章/页面上进行更改，但您会在下面找到一个示例：

page.html中

//button to click to make modal appear
<a class="btn btn-primary" onclick="loadModal()" id="socialStoryModal">
      load modal
</a>

在page.js中使用Hubspot Messenger加载模式

function loadModal() {  
      var msg;
      msg = Messenger().post({
        message:  'modal.html.erb',/see below the carousel
        showCloseButton: true,
        hideAfter: false
      }); 
    }

modal.html.erb =带有轮播和社交嵌入的模态（这里最多可以有50个）

<div id="embeds-carousel" class="carousel slide" data-ride="carousel" data-interval="false">

    <div class="carousel-inner" role="listbox">    

         <div class="item active" id="item1" >
    <script>
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/5456544654565/";
embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
          var embed_html = data.html;
          $( "div#item1").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    }; 
$.ajax(embed_request);
</script>
</div>

  <div class="item" id="item2" >
    <script>
var url = "https://publish.twitter.com/oembed?url=https://twitter.com/coca/status/546664465342324"; 

embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
           var embed_html = data.html;
          $( "div#item2").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };  
$.ajax(embed_request);
</script>
</div>

<div class="item" id="item3" >
    <script>
var url = "https://publish.twitter.com/oembed?url=https://twitter.com/muse/status/65353453F"; 

embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
           var embed_html = data.html;
          $( "div#item3").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    }; 
$.ajax(embed_request);
</script>
</div>


<div class="item" id="item4" >
    <script>
var url = « https://api.instagram.com/oembed?url=https://www.instagram.com/p/cftzezeker5/";
embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
          var embed_html = data.html;
          $( "div#item4").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };  
 $.ajax(embed_request);
 </script>
</div>

<div class="item" id="item5" >
    <script>
var url = « var url = "https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/fdgyez556Yds";
";
embed_request = {
      url: url,
      dataType: "jsonp",
      cache: false,
      success: function (data) {
        try {
          var embed_html = data.html;
          $( "div#item5").html(embed_html);
        } catch (err) {
          console.log(err);
        }
      }
    };  
 $.ajax(embed_request);
</script>
</div>

and so on…
 </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#embeds-carousel" role="button" data-slide="prev">
    <i class="fa chevron fa-chevron-left "></i>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#embeds-carousel" role="button" data-slide="next">
    <i class="fa chevron fa-chevron-right "></i>
    <span class="sr-only">Next</span>
  </a>


</div>

我已经看到大量的库延迟加载图片甚至有时候脚本/ iframe但他们都需要直接添加块中的某些类，这对我来说没有任何帮助，因为我使用上面的oembed和我无处可去放这些懒惰的课程。

我需要使用这些oEmbeds iframe。

Answer 1

延迟加载你需要将它们添加到数组而不是在DOM中呈现它们的嵌入，并且一旦加载了所有这些（成功与否），那么你可以使用该数组仅在DOM中呈现目前的幻灯片。

以下是一个例子：

renderEmbedSlide(index)

最后，你需要为你的轮播组件添加一个钩子，以便每当幻灯片更改幻灯片时调用.carousel-inner .item，确保新幻灯片的索引（从零开始）是作为参数传递给函数。

您可能还需要在if form.is_valid(): print("all ok") return HttpResponseRedirect(reverse_lazy('home')) else: print(form.contact_name.errors) return Render(request, '/path/to/your/tempalate', context={'form': form}) CSS类中添加默认的最小宽度和最小高度，以允许轮播组件预先知道尺寸，因为此后幻灯片（嵌入）将延迟加载。 / p>

旋转木马内幻灯片的延迟加载内容（内容为oEmbeds / iframes）

1 个答案: