image

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

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

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

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

順番はこれ。。力業ですけど。。もっとスマートな感じでやりたい。。

    <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();
        };
    });</p>

<p>

html

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

    <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>

CSS

    div.lazy-container{text-align:center;}
    img.lazy{width:640px;height:480px;}</p>

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

<p>

(Visited 1 times, 1 visits today)

コメントを残す

メールアドレスが公開されることはありません。