https://www.ilbe.com/v202432/js/board/thumb.js

1/**
2 * 
3 */
4
5/* 썸네일 URL 을 실제 요청 주소로 바꾼다 (경로 정규화 + 리사이저 + 영상 배지).
6   ⭐ loadLazyImage 와 hideImage 가 함께 쓴다 — 규칙을 한 곳에만 둔다. */
7function ibResolveThumb(el, src){
8	if(!src) return src;
9	if(/^\.?\/?files[0-9]*\/attach\//i.test(src)){
10		src = "https://ncache.ilbe.com/" + src.replace(/^\.?\//, "");
11	}
12	if(/\.mp4$/i.test(src)){ src = src.replace(/\.mp4$/i, "_poster.jpg"); }
13	/* 영상에서 뽑은 썸네일이면 ▶ 배지 */
14	if(/^https?:\/\/img\.youtube\.com\/vi\//i.test(src) || /_poster\.jpg$/i.test(src)){
15		$(el).addClass("thumb-video").parent().addClass("thumb-video-wrap");
16	}
17	var mt = src.match(/^https?:\/\/ncache\.ilbe\.com\/(files[0-9]?\/attach\/[^?#]+\.(?:jpg|jpeg|png|gif|webp))$/i);
18	if(mt){ $(el).attr("data-orig", src); return "/t/320/" + mt[1]; }
19	$(el).removeAttr("data-orig");
20	return src;
21}
22function loadLazyImage(){
23	$(".lazy_thumbnail").each(function(){
24		if($(this).css("visibility")=="hidden" && !$(this).attr("src")){
25			var winHeight=$(window).height();
26			var scrollTop=$(window).scrollTop();
27			var pos=$(this).offset();
28			var height=$(this).parent().height();
29			if( (scrollTop <=pos.top && winHeight+scrollTop >=pos.top) ||
30					(scrollTop <=pos.top+height && winHeight+scrollTop >=pos.top+height) ){
31				var lazySrc = ibResolveThumb(this, $(this).attr("data"));
32				$(this).attr("src",lazySrc).attr("onload","showImage(this)").attr("onerror","hideImage(this)");
33			}
34		}
35	});
36}
37function hideImage(img){
38	/* ① /t/320 리사이저가 실패하면 원본으로 한 번 더 */
39	var orig=$(img).attr("data-orig");
40	if(orig && String($(img).attr("src")).indexOf("/t/")===0){
41		$(img).removeAttr("data-orig").attr("src", orig);
42		return;
43	}
44	/* ② 그래도 안 되면 다음 후보로 — 서버가 data-alts 에 순서대로 넣어준다.
45	   ⛔ 이게 없던 시절엔 첫 후보가 죽으면 그냥 빈칸이었다. 본문에 유튜브가 있어도
46	      쓰지 않았다(2026-09-25 사장님 신고: img 는 있는데 파일이 지워진 글). */
47	var alts=$(img).attr("data-alts");
48	if(alts){
49		var list=alts.split("|");
50		var idx=parseInt($(img).attr("data-altidx")||"0", 10);
51		while(idx < list.length){
52			var cand=list[idx]; idx++;
53			if(cand){
54				$(img).attr("data-altidx", idx);
55				$(img).attr("src", ibResolveThumb(img, cand));
56				return;
57			}
58		}
59	}
60	/* ③ 후보가 바닥나면 칸을 비운다(자리는 남긴다 — 없애면 제목이 왼쪽으로 붙는다). */
61	var rmId=$(img).attr("data-remove");
62	if(rmId && document.getElementById(rmId)){ $("#"+rmId).empty(); return; }
63	var box=$(img).closest("a.thumb");
64	if(box.length){ box.remove(); return; }
65	$(img).parent().remove();
66}
67function showImage(img){
68	/* 썸네일 크기·정렬은 CSS(.type-webzine / .type-gallery 의 object-fit)가 맡는다.
69	   종전엔 여기서 .img-portrait/.img-landscape 를 붙였는데, 웹진에서는 CSS 우선순위에
70	   밀려 무력이었고 갤러리에서만 먹어 긴 사진을 가운데 토막만 보이게 했다.
71	   2026-09-25 갤러리에 object-fit 규칙을 넣으면서 함께 제거. */
72	$(img).css("visibility","visible");
73}
74$(document).ready(function(){
75	if(!document.getElementById("thumb-video-style")){
76		$("head").append('<style id="thumb-video-style">.thumb-video-wrap{position:relative}.thumb-video-wrap:before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(0,0,0,.55);box-shadow:0 0 0 1px rgba(255,255,255,.35);pointer-events:none;z-index:2}.thumb-video-wrap:after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;margin:-4px 0 0 -2px;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent #fff;pointer-events:none;z-index:3}</style>');
77	}
78			
79	loadLazyImage();
80	$(window).on("scroll",loadLazyImage);
81	$(window).on("resize",loadLazyImage);
82});
83