https://github.com/appleple/acms-image-placeholder
Image placeholder for a-blog cms.
https://github.com/appleple/acms-image-placeholder
Last synced: over 1 year ago
JSON representation
Image placeholder for a-blog cms.
- Host: GitHub
- URL: https://github.com/appleple/acms-image-placeholder
- Owner: appleple
- License: mit
- Created: 2018-05-19T00:09:11.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-19T00:58:51.000Z (about 8 years ago)
- Last Synced: 2025-01-09T11:55:40.163Z (over 1 year ago)
- Language: PHP
- Size: 61.5 KB
- Stars: 2
- Watchers: 6
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ImagePlaceholder for a-blog cms
a-blog cms Ver.2.8.0より拡張アプリ「ImagePlaceholder」を利用できるようになります。
## ダウンロード
[ImagePlaceholder for a-blog cms](https://github.com/appleple/acms-image-placeholder/raw/master/build/ImagePlaceholder.zip)
## 使い方
まず、SVG画像はエントリーなどの保存時に生成されますので、上記の設定が完了後、エントリーを再保存して下さい。その後、SVGプレイスホルダーの出すには校正オプションを使って出力します。
### 単色プレイスホルダーの場合
```
```
### シルエットプレイスホルダーの場合
```
```
ただ、このままだと画像がプレイスホルダー画像に差し代わるだけで、プレイスホルダーとして動きません。 そこで、最初はSVGプレイスホルダー画像を表示しておき、JavaScriptを使って画像がロードされたタイミングで、本来の画像に差し替える処理を行います。
```
ACMS.Ready(function(){
$('.js-lazy-load').each(function(){
var $self = $(this);
var url = $self.data('url');
var imageObj = new Image();
imageObj.item = $self;
imageObj.source = url;
imageObj.onload = function(){
var self = this;
setTimeout(function(){
self.item.attr('src', self.source);
}, 500 + 3000 * Math.random());
};
imageObj.src = url;
});
});
```