bằng cách sử dụng chế độ đơn giản, hiển thị nội dung tải trong khi nội dung bên trong khung nội tuyến tải

Question

Chào buổi sáng!

Tôi đang sử dụng plugin tuyệt vời SimpleModal cho jQuery từ Eric Martin. Hiện tại, tôi đang tải một phương thức bằng cách sử dụng iframe để tải các trang được yêu cầu của tôi hoạt động như mong đợi. Những gì tôi muốn thực hiện là một tải ... spinner hiển thị trong khi nội dung đang tải.

Tôi tải đa phương thức của tôi như sau:

jQuery(function ($) { 
    // Load dialog on click 
    $('.basic').click(function (e) { 
     var src = "http://localhost" + $(this).attr("href"); 
     $.modal('<iframe id="details" class="so" src="' + src + '" height="500"  width="500" style="border:0">', { 
      closeHTML: "<a title='Close' class='modalCloseImg simplemodal-close'></a>", 
      containerId: "simplemodal-container", 
      overlayId: "simplemodal-overlay", 
      overlayClose: true 
     }); 

     return false; 
    }); 
}); 

Tôi có một hình ảnh bộ nền cho modal-container của tôi, hiển thị ngay lập tức. Tôi chắc chắn muốn hiển thị một spinner tải ở đây là tốt.

Answer 1

Tôi đã có thể giải quyết điều này bằng cách chèn một div tải bên trong nguồn đơn giản và sau đó gọi hiện/ẩn khi cần từ mã của tôi.

Answer 2

Câu trả lời đơn giản cho việc này là sử dụng một tải() và sau đó đặt mã cho phương thức trong gọi lại của tải. Dưới đây là ví dụ, pseudo-code -

$('.basic').click(function (e) { 
    e.preventDefault() // use instead of return false 
    var src = "http://localhost" + $(this).attr("href"); 
    $('iframe details').load('loading.html', function() { 
     $.modal('<iframe id="det.... 

Bằng cách đó, iFrame tải trang chứa hình ảnh ngay lập tức và sau đó là phương thức.

Answer 3

Tôi đang sử dụng phiên bản hơi mở rộng spin.js cho những người quay phim đẹp và lớp phủ spinner kiểu cách. Nó có thể được sử dụng trên bất kỳ yếu tố bằng cách đơn giản:

$('#ELEMENT_ID').spin() 

hoặc cho spinners modal:

$('#ELEMENT_ID').spin("modal") 

gọi quay một lần nữa để tắt và loại bỏ các spinner một lần nữa. Đây là cách nó trông giống như:

Đây là spin.min.js bao gồm một phần mở rộng jQuery và một số opts mặc định cho spinners modal:

//fgnass.github.com/spin.js#v1.2.6 
!function(e,t,n){function o(e,n){var r=t.createElement(e||"div"),i;for(i in n)r[i]=n[i];return r}function u(e){for(var t=1,n=arguments.length;t<n;t++)e.appendChild(arguments[t]);return e}function f(e,t,n,r){var o=["opacity",t,~~(e*100),n,r].join("-"),u=.01+n/r*100,f=Math.max(1-(1-e)/t*(100-u),e),l=s.substring(0,s.indexOf("Animation")).toLowerCase(),c=l&&"-"+l+"-"||"";return i[o]||(a.insertRule("@"+c+"keyframes "+o+"{"+"0%{opacity:"+f+"}"+u+"%{opacity:"+e+"}"+(u+.01)+"%{opacity:1}"+(u+t)%100+"%{opacity:"+e+"}"+"100%{opacity:"+f+"}"+"}",a.cssRules.length),i[o]=1),o}function l(e,t){var i=e.style,s,o;if(i[t]!==n)return t;t=t.charAt(0).toUpperCase()+t.slice(1);for(o=0;o<r.length;o++){s=r[o]+t;if(i[s]!==n)return s}}function c(e,t){for(var n in t)e.style[l(e,n)||n]=t[n];return e}function h(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)e[i]===n&&(e[i]=r[i])}return e}function p(e){var t={x:e.offsetLeft,y:e.offsetTop};while(e=e.offsetParent)t.x+=e.offsetLeft,t.y+=e.offsetTop;return t}var r=["webkit","Moz","ms","O"],i={},s,a=function(){var e=o("style",{type:"text/css"});return u(t.getElementsByTagName("head")[0],e),e.sheet||e.styleSheet}(),d={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",speed:1,trail:100,opacity:.25,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto"},v=function m(e){if(!this.spin)return new m(e);this.opts=h(e||{},m.defaults,d)};v.defaults={},h(v.prototype,{spin:function(e){this.stop();var t=this,n=t.opts,r=t.el=c(o(0,{className:n.className}),{position:"relative",width:0,zIndex:n.zIndex}),i=n.radius+n.length+n.width,u,a;e&&(e.insertBefore(r,e.firstChild||null),a=p(e),u=p(r),c(r,{left:(n.left=="auto"?a.x-u.x+(e.offsetWidth>>1):parseInt(n.left,10)+i)+"px",top:(n.top=="auto"?a.y-u.y+(e.offsetHeight>>1):parseInt(n.top,10)+i)+"px"})),r.setAttribute("aria-role","progressbar"),t.lines(r,t.opts);if(!s){var f=0,l=n.fps,h=l/n.speed,d=(1-n.opacity)/(h*n.trail/100),v=h/n.lines;(function m(){f++;for(var e=n.lines;e;e--){var i=Math.max(1-(f+e*v)%h*d,n.opacity);t.opacity(r,n.lines-e,i,n)}t.timeout=t.el&&setTimeout(m,~~(1e3/l))})()}return t},stop:function(){var e=this.el;return e&&(clearTimeout(this.timeout),e.parentNode&&e.parentNode.removeChild(e),this.el=n),this},lines:function(e,t){function i(e,r){return c(o(),{position:"absolute",width:t.length+t.width+"px",height:t.width+"px",background:e,boxShadow:r,transformOrigin:"left",transform:"rotate("+~~(360/t.lines*n+t.rotate)+"deg) translate("+t.radius+"px"+",0)",borderRadius:(t.corners*t.width>>1)+"px"})}var n=0,r;for(;n<t.lines;n++)r=c(o(),{position:"absolute",top:1+~(t.width/2)+"px",transform:t.hwaccel?"translate3d(0,0,0)":"",opacity:t.opacity,animation:s&&f(t.opacity,t.trail,n,t.lines)+" "+1/t.speed+"s linear infinite"}),t.shadow&&u(r,c(i("#000","0 0 4px #000"),{top:"2px"})),u(e,u(r,i(t.color,"0 0 1px rgba(0,0,0,.1)")));return e},opacity:function(e,t,n){t<e.childNodes.length&&(e.childNodes[t].style.opacity=n)}}),function(){function e(e,t){return o("<"+e+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',t)}var t=c(o("group"),{behavior:"url(#default#VML)"});!l(t,"transform")&&t.adj?(a.addRule(".spin-vml","behavior:url(#default#VML)"),v.prototype.lines=function(t,n){function s(){return c(e("group",{coordsize:i+" "+i,coordorigin:-r+" "+ -r}),{width:i,height:i})}function l(t,i,o){u(a,u(c(s(),{rotation:360/n.lines*t+"deg",left:~~i}),u(c(e("roundrect",{arcsize:n.corners}),{width:r,height:n.width,left:n.radius,top:-n.width>>1,filter:o}),e("fill",{color:n.color,opacity:n.opacity}),e("stroke",{opacity:0}))))}var r=n.length+n.width,i=2*r,o=-(n.width+n.length)*2+"px",a=c(s(),{position:"absolute",top:o,left:o}),f;if(n.shadow)for(f=1;f<=n.lines;f++)l(f,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(f=1;f<=n.lines;f++)l(f);return u(t,a)},v.prototype.opacity=function(e,t,n,r){var i=e.firstChild;r=r.shadow&&r.lines||0,i&&t+r<i.childNodes.length&&(i=i.childNodes[t+r],i=i&&i.firstChild,i=i&&i.firstChild,i&&(i.opacity=n))}):s=l(t,"animation")}(),typeof define=="function"&&define.amd?define(function(){return v}):e.Spinner=v}(window,document); 

var default_opts = { 
     lines: 9, 
     length: 2, 
     width: 3, 
     radius: 8, 
     corners: 1, 
     rotate: 0, 
     color: '#555', 
     speed: 1, 
     trail: 47, 
     shadow: false, 
     hwaccel: false, 
     className: 'spinner', 
     zIndex: 2e9, 
     top: 'auto', 
     left: 'auto' 
}; 

var modal_opts = { 
     lines: 11, // The number of lines to draw 
     length: 23, // The length of each line 
     width: 8, // The line thickness 
     radius: 40, // The radius of the inner circle 
     corners: 1, // Corner roundness (0..1) 
     rotate: 9, // The rotation offset 
     color: '#FFF', // #rgb or #rrggbb 
     speed: 1, // Rounds per second 
     trail: 50, // Afterglow percentage 
     shadow: true, // Whether to render a shadow 
     hwaccel: false, // Whether to use hardware acceleration 
     className: 'spinner', // The CSS class to assign to the spinner 
     zIndex: 2e9, // The z-index (defaults to 2000000000) 
     top: 'auto', // Top position relative to parent in px 
     left: 'auto' // Left position relative to parent in px 
}; 

//jQuery extension 
$.fn.spin = function(opts) { 
    if (opts == null) opts = default_opts; 
    if (opts == "modal") opts = modal_opts; 

    this.each(function() { 
     var $this = $(this), 
     data = $this.data(); 

     if (data.spinner) { 
      data.spinner.stop(); 
      delete data.spinner; 
      if (opts == modal_opts) $("#spin_modal_overlay").remove(); 
      return this; 
     } 

     var spinElem = this; 
     if (opts == modal_opts){ 
      $('body').append('<div id="spin_modal_overlay" style="background-color: rgba(0, 0, 0, 0.6); width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:'+(opts.zIndex-1)+'"/>'); 
      spinElem = $("#spin_modal_overlay")[0]; 
     } 
     data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(spinElem); 
    }); 
    return this; 
};