Question

在Bootstrap中使用库：

<div class="instaRow">
    <div class="col-xs-3">
        <a title="5">
            <div class="fooImg">
                <img class=" img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a title="5">
            <div class="fooImg">
                <img class="img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a title="6">
            <div class="fooImg">
                <img class="img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div class="col-xs-3">
        <a title="8">
            <div class="fooImg">
                <img class="img-responsive" src="img/instagram.png" alt="" />
            </div>
        </a>
    </div>
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><i class="fa fa-times" aria-hidden="true"></i></button>
                <h3 class="modal-title">Instagram Image</h3>
            </div>
            <div class="modal-body"></div>
            </div>
        </div>
    </div>
</div>

将从Instagram JSON拉动渲染图像，我想在PHP创建JSON文件时实现内联动画SVG。

SVG：

＆＃13;

<div class="pre_loader" title="pre-loader">
	<svg version="1.1" id="theLoader" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="-10 -10 68 68">
		<path class="loaderFill" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
			<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.2s" repeatCount="indefinite" />
		</path>
	</svg>
</div>

＆＃13;

然而，当我研究是否可能时，从搜索中看，人们会使用非动画SVG文件而不是内联SVG：

我确实在SVG文件上看到了SVG .htaccess方法：

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>

但仍然是一个文件。

关于渲染JSON，我已经看过jQuery的demo，并且有几个例子使用这种方法：

(function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  $.getJSON( flickerAPI, {
    tags: "mount rainier",
    tagmode: "any",
    format: "json"
  })
    .done(function( data ) {
      $.each( data.items, function( i, item ) {
        $( "<img>" ).attr( "src", item.media.m ).appendTo( "#images" );
        if ( i === 3 ) {
          return false;
        }
      });
    });
})();

所以我在考虑使用类似的东西：

$(".pre_loader").show();
$.getJSON('instagram.json', function(theJson) {
   $.each(theJson, function() {
      // some code
   });
   $(".pre_loader").hide();  
});

有没有办法让内联动画SVG作为我的Bootstrap画廊的预加载器？

可以预加载/缓存内联SVG动画吗？

0 个答案: