jquery ajax で外部画像を読み込んだあと、画像サイズを変更

2013年11月11日更新 view: 827 view
photoBy: http://zoomzum.com/wp-content/uploads/2011/06/jqu…

jqueryですべて読み込んだあとに画像サイズを変更するには

ajaxした後に画像を変更する

ajaxで画像を取得し、その画像のサイズを取得。
さらに、その画像サイズを縮小したい場合。

  • 画像が完全に読み込まれてから出ないと画像サイズを取得できない
  • 読み込み前に取得して変更すると画像が表示されない

上記を考慮した画像サイズ変更方法がこちら。

imagesloaded.js を使う

スポンサードリンク

jquery load を使うより、こっちを使ったほうがいいらしい。
理由は知らん。

https://gist.github.com/paulirish/268257

からダウンロードしてから以下をやる。

Hoge.get($(this).data('url')).done(function(msg) {
        
        //$("#hoge-contents")
        //ajaxで取得した内容をごにょごにょ
        
        //画像がすべて読み込まれたら
        $("#hoge-contents img").imagesLoaded(function(){
            
            //すべての画像サイズを 5分の1に変更
            $('#hoge-contents img').each(function(i){
                
                height = $(this).height()/5;
                width = $(this).width()/5;
                
                $(this).height(height);
                $(this).width(width);
                
            });
        });
    
    });
    
});

ajax で hoge-contents にデータを突っ込む。
データが格納されたら imagesLoaded をつけてから画像変更処理。

これで画像サイズをすべて正常に変更することが可能。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

12月12日 ( 火 ) にアクセスが多かった記事はこちら!