Home > スポンサー広告 > ウェブページにある画像と背景画像を表示するブックマークレット (1)

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

edvakf URL 2008-11-06 (木) 08:34

直接は関係ありませんが、これを iGoogle で使うとおもしろいことになります。
画像の読み込み数を減らして少しでも速度を上げようということなのでしょうかね。

karafuto URL 2008-11-07 (金) 15:24

edvakfさん、こんにちは。
ブログ読ませてもらっています。

>画像の読み込み数を減らして少しでも速度を上げようということなのでしょうかね。

大きいサイトだと、けっこう見かけますね。
だけど、ロゴまで他の画像と一緒にするのはやり過ぎのような。

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/183-a7931898
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog
Trackback from 2010-10-31 (日) 07:27

-

管理人の承認後に表示されます (more…)

Home > スポンサー広告 > ウェブページにある画像と背景画像を表示するブックマークレット (1)

Home > javascript > ウェブページにある画像と背景画像を表示するブックマークレット (1)

ウェブページにある画像と背景画像を表示するブックマークレット (1)

javascript

ウェブページ上にある画像と背景画像を表示するブックマークレットを書いてみた。

新しいウィンドウを開いて、画像をそのままの大きさで表示して、並べるだけ。表示する画像は、img要素の画像と CSSで指定された背景画像。

ウェブページにある画像と背景画像を表示するブックマークレット1

ブックマークレットの内容

javascript:(function (){

    var imageList = getImages();
    getBackgroundImages(imageList);
    removeOverlap(imageList);
    // 画像が見つからなかった時
    if (! imageList.length){
        alert('\u753B\u50CF\u306F\u898B\u3064\u304B\u308A\u307E\u305B\u3093\u3067\u3057\u305F');
        return;
    }
    openWindow(createHTML(imageList));

    // 画像取得
    function getImages(){
        var imgs = document.getElementsByTagName('img');
        var list = [];
        if (imgs.length){
            for(var i = 0; i < imgs.length; i++){
                var img = imgs[i];
                if (img.width == 0) continue;
                list.push({
                    src: img.src,
                    alt: img.alt
                });
            }
        }
        return list;
    }

    // 背景画像を取得
    function getBackgroundImages(imgs){
        var elm = document.getElementsByTagName('*');
        for (var i = 0; i < elm.length; i ++ ){
            var backgroundImage = document.defaultView.getComputedStyle(elm[i], '').getPropertyValue('background-image');
            if (backgroundImage != 'none'){
                var uri = backgroundImage.replace(/url\(\s*(['"]?)(.+)\1\s*\)/, '$2');
                imgs.push({src: uri, place: 'background'});
            }
        }
    }

    // 重複を削除
    function removeOverlap(imgs){
        for (var i = 0; i < imgs.length - 2; i ++ ){
            for (var j = imgs.length - 1; j > i; j -- ){
                if (imgs[i].src == imgs[j].src){
                    imgs.splice(j, 1);
                }
            }
        }
    }

    // HTMLを作成
    function createHTML(imgs){
        style = '<style>img{ margin: 4px; border: 1px silver solid;}</style>';
        var html = '<html><head><title>images(' +  imgs.length + ') ' + document.title + '</title>' + style + '</head><body><p>';
        html += createHTMLImage(imgs);
        html += '</p></body></html>';
        return html;
    }

    // 画像の HTMLを作成
    function createHTMLImage(imgs){
        var HTMLImage = '';
        for (var i = 0; i < imgs.length; i ++ ){
            var alt = imgs[i].alt ? '" alt="' + imgs[i].alt : '';
            var title = imgs[i].title ? '" title="' + imgs[i].title : '';
            HTMLImage += '<img src="' + imgs[i].src + alt + title + '" />';
        }
        return HTMLImage;
    }

    // 新しいウィンドウを表示
    function openWindow(html){
        win = window.open();
        win.document.open();
        win.document.write(html);
        win.document.close();
    }

})();

Comments:2

edvakf URL 2008-11-06 (木) 08:34

直接は関係ありませんが、これを iGoogle で使うとおもしろいことになります。
画像の読み込み数を減らして少しでも速度を上げようということなのでしょうかね。

karafuto URL 2008-11-07 (金) 15:24

edvakfさん、こんにちは。
ブログ読ませてもらっています。

>画像の読み込み数を減らして少しでも速度を上げようということなのでしょうかね。

大きいサイトだと、けっこう見かけますね。
だけど、ロゴまで他の画像と一緒にするのはやり過ぎのような。

Comment Form

Trackback+Pingback:1

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/183-a7931898
Listed below are links to weblogs that reference
ウェブページにある画像と背景画像を表示するブックマークレット (1) from Karafuto Blog
Trackback from 2010-10-31 (日) 07:27

-

管理人の承認後に表示されます (more…)

Home > javascript > ウェブページにある画像と背景画像を表示するブックマークレット (1)

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。