중복되지 않고 스크롤에 이미지를 동적으로로드하는 방법은 무엇입니까?

Question

동적으로 데이터를로드하는 방법을 설명하는 여러 포럼과 자습서를 읽었습니다.

필자는 데이터 비동기를 얻기 위해 php 파일을 통해 데이터베이스에 AJAX 호출을해야한다는 것을 잘 알고 있습니다.

이미지는 선택 문과 주문을 사용하여 12 개의 제한없이 무작위 순서로로드됩니다 (예 : ). SELECT * FROM images ORDER BY rand() LIMIT 12

사용자가 페이지 하단으로 스크롤 할 때 더 많은 이미지를로드하고 싶습니다.

문제는 이미지가 두 번로드되지 않도록하는 방법입니다. 나는로드 된 이미지 배열을 얻고 AJAX 호출을 전달하여 적절한 SQL 문을 수행하여 이미지 배열에서 3 개의 이미지 "DISTINCT"를 선택하고 모든 이미지를 결합하는 방법을 생각했습니다.

그러나 배열을 SQL 테이블과 비교하는 방법을 잘 모르겠습니다. 또는 이것이 문제를 해결할 수있는 최선의 방법 일 경우.

요약 :

이미지 표 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16

HTML로로드 된 이미지 : 1, 3, 4, 5, 6

페이지 맨 아래로 스크롤 할 때 HTML에로드 된 이미지와 다른 3 개의 임의 이미지를로드하십시오.

사이드 노트 : 나는 순수한 자바 스크립트를 사용하고 플러그 인을 import하는 것을 선호하지 않습니다.

편집 : 나는 논리가 무너져서, 그게 내가 가진 고민의 응용이다. 내가 해시 조각을 사용하여 Google에서 모든 이미지로드가 효과적으로 이루어 지도록 색인을 생성 할 수 있도록해야한다고 언급 했어야합니다.

Answer 1

로드 된 이미지를 어딘가에 저장 (세션, 쿠키, 자바 스크립트) 한 다음 조건에로드 된 이미지의 배열을 사용하여 쿼리 결과에서 제외시킵니다.

SELECT * FROM images WHERE id_image NOT IN (1, 3, 4, 5, 6) ORDER BY rand() LIMIT 12