技術・Web access_time2018.03.02 02:13 update

このサイトで使用しているWeb技術の備忘録(WordPress, jQuery, CSS)

 常日頃からWebで適当に検索して当たった記事に助けられ続けているWebコーダーとして、たまには技術の共有でもしようと思ったのですが、単独記事としてまとめる説明力がないので適当に殴り書き。

 思いついた時や思い出した時に更新していきます。需要があれば詳しく書くこともあるかも。

 ※PHPに詳しくないためにjQueryで強引に何とかしている場合が多いので、パフォーマンスをミリ秒単位で上げたい方には向いていません。あくまでその場しのぎです。

 

LazyLoadで後から画像を読み込む際に、要素内スクロールでは読み込みを開始しない

 画像の読み込みを遅らせてサイトの読み込みを高速化するLazyLoad技術。プラグインまたはJavaScriptライブラリを使って導入しているサイトは(WordPress以外でも)多いはずです。

 ところが思わぬ落とし穴があって、overflow: scrollを設定したポップアップ要素でスクロールしても読み込みが始まらない。

nav {
	position: fixed;
	width: 100%;
	height: calc(100% - 30px);
	top: 30px;
	overflow-y: auto;
	z-index: 9999;
}

 例えばこのサイトで言えば上のコードのようになっているスマホ版のメニューの場合がそうで、PCではサイドバーにあるAmazon商品やYouTubeなどのサムネイルがいつまで経っても読み込まれずに困ってしまいました。

 理由はlazyloadプラグインが「bodyでスクロールイベントが発生した時に画像が見えていたら」というような判定を行っているからだと推測しますが、プラグインの方を弄るのは大変。

 ということで解決法は強引に。

$('#recommend, #now, nav').on('scroll', function(){ // overflow: scrollを設定している要素でスクロールイベントが発生した時に
	$('body,html').trigger("scroll"); //bodyでもスクロールイベントを強制発火
})

 これだけ。triggerはこういう力技でどうにかしたい時に何かと威力を発揮します。本当はもっとスマートなやり方もあるのでしょうが。

 

WordPressのoEmbedなどiframe内のリンクではPjaxが機能しない

 このサイトではページ遷移に「Barba.js」を利用し、サイト内リンクではシームレスに移動するようになっています。

Pjax(非同期画面遷移)でシームレスな画面遷移ができるBarba.js

 Barba.jsについては上の記事など様々な解説があるので割愛。

 ところで、WordPressでは、サイト内記事やYouTubeなど、特定のURLを書き込むと自動でブログカードに変換してくれる機能があります。

Image

Surface Proシリーズと一緒に使って良かったアクセサリをまとめて紹介

 私は2014年末にSurface Pro2を買ってからSurfaceファンになり、2015年末からはPro4を、そして現在はPr... 続きを読む

access_time2017-04-23

 これが非常に便利だと気づいて使ってみたのですが、どうやらiframe内で呼び出しているリンクではbarba.jsが反応せず、通常のリンクと同様に再読み込みが発生してしまうことがわかりました。

 PHPから触ればどうにかなるのかもしれませんが、よくわからなかったので、呼び出しているiframeの上からaリンクで挟み、before要素でカード全体を押し潰すという力技で解決。

$(window).on('load', function(){
	$('iframe.wp-embedded-content').each(function() {
		var URL = $(this).attr('src').split('/embed')[0] //iframe要素のsrcに付与されるURLから、embed以下を消すと素の記事URLが取得できる
		$(this).wrap('<a class="wp-embed-link" href="'+URL+'" />') //取得したURL付のリンクで挟み込む
	});
});

 

a.wp-embed-link {
	display: inline-block;
	position: relative;
	transition: opacity 0.3s ease; // マウスオーバー用の設定
}
a.wp-embed-link:hover {
	opacity: 0.7; // マウスオーバー時に薄くする
}
a.wp-embed-link::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

※jsの3行目は、lazyloadプラグインによってはdata-srcにしないと取得できないかもしれません。

 コメント数とブログ名は飾り。共有ボタンは紛らわしいので非表示にしました(これはCSSでdisplay: noneにするだけなので割愛)。

 

このサイトで使用しているWeb技術の備忘録(WordPress, jQuery, CSS) への{{comments_list.length}}件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

*技術・Web* カテゴリーの最新記事