-
SPでのボタンのずれを修正したい
トピックス by
1792 pt
2023年9月14日 12:41
212
PV
【Widget名】
画像の中の画像が動く(画像)
【修正したいこと】
SPでみると、ボタンがずれています。リロードすると位置が訂正されます。なお、PCでは表示に問題ありません。
【参考画像】
https://drive.google.com/file/d/1cduy2HP4oVjlJ0vGqO4DMLV56V3Fz0g8/view
-
1 コメント
-
ページ内に画像が多数あることにより該当の画像がすぐ読み込めないことが原因として考えられます。
タグ設定にlazyloadをご設定くださいませ。
【タグ設定の設定箇所】
https://squadbeyond.gyazo.com/3b1dee79182f87e7d8419a5d76788fb8
【挿入するコード】
JavaScript Head
<script>
lazyImgLoaded = function (object, callback) {
object = Array.from(object).filter((img) => {
return img.matches('.lazyload:not([data-ll-status])');
});
if (typeof LazyLoad === 'undefined' || !(object.length)) {
if (!callback) return;
callback();
return;
}
let preload = 'lazypreload-';
let n = 0;
while (document.querySelector('.' + preload + n)) n++;
Array.from(object, el => {
el.classList.add(preload + n);
el.classList.remove('lazyload');
});
lazyLoadInstance.update();
const lazyPreloadInstance = new LazyLoad({
elements_selector: '.' + preload + n,
callback_loaded: function (element) {
element.classList.remove(preload + n);
},
callback_finish: function () {
if (!callback) return;
callback();
}
});
lazyPreloadInstance.loadAll();
};
</script>
JavaScript Body
<script>
lazyImgLoaded(document.querySelectorAll(".txt-on span img"));
</script>