我想加快加載有幾個iframe的頁面。這些iframe包含視頻,當單擊文本時滑下並開始播放。我的原始代碼有效。如何修改代碼以獲取iframe加載onclick
HTML
<span id="clickableText" class="link">click me</span>.<span><iframe id="frame" class="rect" src="iframe.html" scrolling="no" marginwidth=0 marginheight=0></iframe></span>
的CSS有一類「矩形」,基本上是一個摺疊的股利和一類的「開放」與過渡向上滑動的。
CSS
.rect{
float: left;
height: 0px;
width: 100%;
display: block;
margin: 0px;
padding: 0px;
opacity: 0;
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}
.open {
height: 11.4vw;
width: 100%;
opacity: 1;
display: inline-block;
}
有添加和刪除類「開」,播放和暫停視頻jQuery的交易。
jQuery的
var frame = $("#frame");
var player;
frame.bind("load", function() {
player = $(this).contents().find("#myVid");
player.on('ended', function() {
frame.removeClass("open");
});
});
$("#clickableText").click(function(){
if (frame.hasClass("open")) {
frame.removeClass("open");
player[0].pause();
} else {
frame.addClass("open");
player[0].play();
}
});
所以無論如何,這個工程。但是因爲我的網頁上有幾個視頻,所以加載速度很慢。因此,在網上尋找時,我發現了一些關於點擊加載iframe的建議。所以,我想加入這一行來修改我的代碼:
frame.attr("src","iframe.html");
在這裏
:
$("#clickableText").click(function(){
frame.attr("src","iframe.html");
if (frame.hasClass("open")) {
etc...
,也當然,從HTML刪除iframe的來源,因此得到來自擺脫該位的我的iframe標記:
src="iframe.html"
哪個修復頁面加載速度緩慢但...這裏是我被卡住的地方。當iframe打開時,您可以看到視頻的第一個圖像,但它沒有播放,也沒有聲音。頁面的加載雖然很精彩,但如果我能夠實現它的功能,那麼我就處於正確的軌道上......不用說,任何建議都將不勝感激。通過jQuery
onClick='document.getElementById("frame").src="iframe.html";'
或撥打源文件上點擊: