lazyload.jsで遅延ロードとURLパラメーターを流入元毎にページ内のコンテンツ要素順序を変える(Jquery)LPO

lazyload.jsで遅延ロードとURLパラメーターを流入元毎にページ内のコンテンツ要素順序を変える(Jquery)

image
未リファクタリング。
パフォーマンスあんま。
とにかく機能だけ実装した叩き台。
regExpのところ全然。。もっとある。。
lazy.jsはここを参照しました。
ここ

URLパラメーターを取得、流入元毎にページ内のコンテンツの表示順序を変えるって
LPOっていうらしいね。初めて知りました。。勉強になります。。

順番はこれ。。力業ですけど。。もっとスマートな感じでやりたい。。
[javascript]
<script type="text/javascript" src="js/jquery1.11.1.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>
$(function(){
var href = window.location.href;
var result = href.match(/\?page=(\d)+/);
var $wrapper = $('#wrapper');
var $wrapperinner = $wrapper.html();
var $red = $('#red');
var $blue = $('#blue');
var $yellow = $('#yellow');
var redinner = $red.html();
var blueinner = $blue.html();
var yellowinner = $yellow.html();
var $last;
if(result[1] == "1"){
$wrapper.before(redinner);
$last = $wrapper.find('#red').last();
$last.empty();
}else if(result[1] == "2"){
$wrapper.before(blueinner);
$last = $wrapper.find('#blue').last();
$last.empty();
};
});

[/javascript]
html

遅延ロードには「data-original」属性でパス指定するみたいですね。んで普通のsrc属性にはダミー画像。srcなしなら灰色の画像がでるみたい。
オプションでfadeinとかスクロールに対しての画像読み込み準備とかできるみたいですね。


わたしは2の場合ファーストビューになる黄色コンテンツです。

わたしは3の場合ファーストビューになる青コンテンツです。

わたしは1の場合ファーストビューになる赤コンテンツです。

ふぁふぁふぁ















CSS
[css]
div.lazy-container{text-align:center;}
img.lazy{width:640px;height:480px;}

.hrefcontent{width:400px;height: 400px;text-align:center;vertical-align:middle;}
.redhrefcontent{background:red;}
.yellowhrefcontent{background:yellow;}
.bluehrefcontent{background:blue;}

[/css]