読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

サイズの指定されていない画像タグにサイズを付けるjQueryプラグイン

既にあるのかもしれませんが、だからといってどうやって検索したらいいかわからないものは自分で作るしかない…ということで表題のものを作りました。

tategakibunko/jquery.image-size-assign · GitHub

概要

どういうものかというと、ようするに以下のようなことをするものです。

<!-- before -->
<img src="http://placehold.it/350x150">

<!-- after -->
<img src="http://placehold.it/350x150" width="350" height="150">

使い方

こんな感じです。

$(function(){
  $("img").imageSizeAssign({
    maxSize:{
      width:500,
      height:500
    },
    onSize:function(size){
      return size;
    },
    onComplete:function(){
      //console.log("all sizes are set");
    }
  });
});

オプションにmaxSizeを指定すると、あふれた時に元サイズのレートを保ったままリサイズします。

例えば上の例だとmaxSizeが500x500なので、1000x1000の画像だったら、500x500にリサイズされます。

参考にしたソース

javascript - Can I sync up multiple image onload calls? - Stack Overflow