PixabayのAPIを使って背景をスライドショーする。

JQuery ＋ backstretchからJavascript ＋ CSSへ

このスクリプトの元を書いたのはかなり前のことなので現在のAPIと異なるところがあるかもしれません。 元はjQuery ＋ backstretchを使用して背景（Body）をスライドショーしていたものを最近書き換えたので記録に残します。一応APIの部分は今でも動きます。

JavaScript ＋ CSS

// --- 設定 ---
const SLIDE_MS = 30000;       // 1枚表示時間
const PRELOAD_AHEAD = 3;      // 次に表示する枚数だけプリロード
const MAX_CONCURRENT = 3;     // 同時ダウンロード上限

// --- 背景スライド（安全版） ---
function setBackground(url) {
    const img = new Image();
    img.onload = () => {
        document.body.style.backgroundImage = `url('${url}')`;
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundPosition = 'center';
        document.body.style.transition = 'background-image 8s ease-in-out';
    };
    img.src = url;
}

async function preloadImages(images) {
    for (let i = 0; i < images.length; i += 5) {
        for (let j = i; j < Math.min(i + 5, images.length); j++) {
            const img = new Image();
            img.src = images[j];
        }
        await new Promise(r => setTimeout(r, 100));
    }
}

async function startSlideshow(images) {
    let i = 0;
    // 最初の画像プリロード
    const firstImg = new Image();
    firstImg.src = images[i];
    firstImg.onload = () => {
        // 背景画像セット
        document.body.style.backgroundImage = `url('${images[i]}')`;
        document.body.style.backgroundSize = 'cover';
        document.body.style.backgroundPosition = 'center';
        // フェードイン用 div ではなく body を直接操作
        document.body.style.opacity = 0;
        document.body.style.transition = 'opacity 6s ease-in-out';
        // 次の描画フレームで opacity 変更
        requestAnimationFrame(() => {
            document.body.style.opacity = 1;
        });
    };
    await preloadImages(images.slice(1));
    // 2枚目以降は従来通り
    setInterval(() => {
        i = (i + 1) % images.length;
        setBackground(images[i]);
    }, SLIDE_MS);
}

// --- Pixabay取得 ---
async function fetchPixabayImages(keyword) {
    const url = `https://pixabay.com/api/?key=*****************&q=${encodeURIComponent(keyword)}&per_page=100`;//ここにPixaのAPIキーを
    try {
        const res = await fetch(url);
        const data = await res.json();
        const array = data.hits.map(h => h.largeImageURL).sort(() => Math.random() - 0.5);
        const pixaKey = document.getElementById("pixaKey");
        if (pixaKey) pixaKey.insertAdjacentText("beforeend", keyword);
        if (array.length > 0) startSlideshow(array);
    } catch (e) { console.error("Pixabay API error:", e); }
}

// --- メイン ---検索キーワードを取得します。
window.addEventListener("DOMContentLoaded", () => {
    const resGet = GetQueryString();
    const keyword = resGet.pixa || pickRandom(arr.map(baseName));
    fetchPixabayImages(keyword);
});

// --- 補助関数 ---
function pickRandom(arr) { return arr[Math.floor(Math.random() * arr.length)]; }
function baseName(str) { const base = str.substring(str.lastIndexOf('/') + 1); return base.includes(".") ? str.substring(0, str.lastIndexOf(".")) : str; }

感想

当時は日本語キーワードではほとんどヒットしなかったので英語で検索掛けてましたが今は日本語でも大丈夫だそうです。好きなキーワードをいくつか配列に入れてランダム再生すると飽きませんｗ。
いや～軽くて驚きました。今のJavascriptとCSSはめっちゃ軽いね。GPUに余裕があるとエフェクトがいろいろ切り替わるみたいです。Firefoxだとエフェクトが効かないのが難点・・・

---

JQuery + backstretch 版

JavaScript

function jqApi(url, transmit, tagid, pArry) {

	$.getJSON(url, {
		name: transmit
	}, function (data) {
		var dataArray = data[pArry];
		// console.log(dataArray);
		var array = [];
		var ImageURL = "";
		// var outputFront = "<script>$.backstretch(['";
		$.each(dataArray, function (i) {

			ImageURL = dataArray[i].largeImageURL;
			array.push(ImageURL);
		});
		//配列をシャッフル
		for (i = array.length - 1; i > 0; i--) {
			var j = Math.floor(Math.random() * (i + 1));
			var tmp = array[i];
			array[i] = array[j];
			array[j] = tmp;
		}

		$.backstretch(array,{fade: 1750, duration: 30000});

	});

}

function baseName(str) {
	var base = new String(str).substring(str.lastIndexOf('/') + 1);
	if (base.lastIndexOf(".") != -1)
		base = base.substring(0, base.lastIndexOf("."));
	return base;
}

function pixabyKey(key) {
	if (key != null) {
		var random = key;
	} else {
		var random = arr[Math.floor(Math.random() * arr.length)];
		random = baseName(random);
	}
	var url = 'https://pixabay.com/api/?key=*****************************&q=' + random + '&per_page=100';//PixaのAPIキー
	var
		transmit = "largeImageURL",
		tagid = "#pixabay",
		pArry = "hits";
	$("#pixaKey").append(random);

	jqApi(url, transmit, tagid, pArry);
}
// main.js	Getキーワード取得
 let resGet = GetQueryString();
pixabyKey(resGet.pixa);

余談

全然覚えてないｗｗｗ確か当時スマホで壁紙をランダムに変える！みたいなアプリがあってそれに触発されて書いたような？ｗｗｗ

Pixabay API 追記