Greasy Fork is available in English.

Furaffinity-Submission-Image-Viewer

Library for creating custom image elements on Furaffinity

このスクリプトは単体で利用できません。右のようなメタデータを含むスクリプトから、ライブラリとして読み込まれます: // @require https://update.greasyfork.org/scripts/492931/1530871/Furaffinity-Submission-Image-Viewer.js

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
作者
Midori Tsume
バージョン
1.1.0
作成日
2024/04/19
更新日
2025/02/02
大きさ
29.5KB
ライセンス
MIT

Furaffinity Custom Image Viewer

Library for creating image elements on Furaffinity. Also see docs on Furaffinity-Submission-Image-Viewer

How to use

  • @require this script

  • Create a new Custom Image Viewer:

    const baseElem = document.createElement("div");
    const faImageViewer = new FAImageViewer(baseElem, imgSrc, prevSrc);
    faImageViewer.load(); // starts loading the image
    
  • Optional: Subscribe to Events:

    faImageViewer.onImageLoad(() => doSomething()); // occurs if the image is fully loaded
    faImageViewer.onImageLoadStart(() => doSomething()); // occurs if the image started loading
    faImageViewer.onPreviewImageLoad(() => doSomething()); // occurs if the preview image fully loaded
    ⠀⠀⠀⠀
    faImageViewer.addEventListener("imageLoad", () => doSomething()); // alternative to onImageLoad
    faImageViewer.addEventListener("imageLoadStart", () => doSomething()); // alternative to onImageLoadStart
    faImageViewer.addEventListener("previewImageLoad", () => doSomething()); // alternative to onPreviewImageLoad
    

Feature Roadmap

Feature Status
Support preview image ✅ Completed
Have different events for image loading ⠀⠀⠀⠀ ✅ Completed

Documentation

CustomImageViewer

The CustomImageViewer class contains following Properties:

  • imageUrl - the image url
  • previewUrl - the preview image url
  • parentContainer - the parent container on which the image will be created
  • faImage - the image element
  • faImagePreview - the preview image element
  • onImageLoad - the callback for when the image is fully loaded
  • onImageLoadStart - the callback for when the image starts loading
  • onPreviewImageLoad - the callback for when the preview image is fully loaded

Functions:

  • load() - starts loading the image
  • reset() - resets the image