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とかスクロールに対しての画像読み込み準備とかできるみたいですね。
[html]
<div id="wrapper">
<div id="yellow"><div class="yellowhrefcontent hrefcontent"><span>わたしは2の場合ファーストビューになる黄色コンテンツです。</span></div></div>
<div id="blue"><div class="bluehrefcontent hrefcontent"><div>わたしは3の場合ファーストビューになる青コンテンツです。</div></div></div>
<div id="red"><div class="redhrefcontent hrefcontent"><p>わたしは1の場合ファーストビューになる赤コンテンツです。</p><div>ふぁふぁふぁ</div></div></div>
</div>
<div class="azy-container">
<div><img data-original="./img/1.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/2.jpg" alt="" class="lazy"></div>
<noscript><img class="lazy_fallback" src="./img/002.jpg" /></noscript>
<div><img data-original="./img/3.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/4.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/5.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/6.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/7.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/8.jpg" alt="" class="lazy"></div>
<div><img data-original="./img/9.jpg" alt="" class="lazy"></div>
</div>
[/html]
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]