загрузите большое количество изображений и установите первые 100, которые будут видны

Question

У меня около 100.000 изображений - максимум 960 x 540 пикселей.

Рекомендуется ли загружать все изображения одновременно, но только первые 100 наборов должны быть видны на экране?

А как я могу это сделать с помощью CSS?

Что-то вроде:

.image {
    display:none;
}

.image:nth(0 - 100){
    display:inline-block;
}

Answer 1

В css нет селектора :nth, вам нужно использовать :nth-child селектор псевдокласса . Затем обновите селектор, чтобы получить остальные изображения (101, 102,... => n + 101), а затем примените стиль, чтобы скрыть их.

/* set default styles here */
.image {
    display:inline-block;
}

/* following would select 101, 102,... since value of 'n' starts from 0 */ 
.image:nth-child(n + 101){
    display:none;
}

---

Если есть другие теги родного брата, используйте :nth-of-type псевдоселектор .

.image:nth-of-type(n + 101){
    display:none;
}

---

См. Также: Запрещает ли загрузка изображения "display: none"?