<div class="yazilar">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra vehicula felis sed luctus. Praesent non lectus urna. Nam vitae ligula sit amet arcu porta vestibulum. Proin interdum magna id dui tincidunt, nec posuere nunc feugiat. Integer tempor nulla aliquam rutrum vulputate. Integer sit amet tincidunt turpis, quis ullamcorper risus. Praesent eu mi efficitur, tincidunt nunc in, euismod nisl. Praesent convallis imperdiet sapien, quis tristique augue vulputate nec. Duis magna orci, semper in efficitur vitae, tempor non nibh. Cras congue, purus elementum vehicula consectetur, justo nunc pellentesque diam, ut finibus est erat eu urna. Nunc consequat augue et vestibulum mattis. Duis porta mi justo, a tincidunt turpis mollis vitae. Nam dictum neque vel placerat blandit. Nam dapibus dui vitae tortor aliquam, et scelerisque enim cursus. Proin eu lorem id odio hendrerit cursus. Ut eu neque sit amet massa hendrerit posuere eget et metus.

Aliquam euismod condimentum bibendum. Maecenas viverra congue odio, at ornare ante tempor id. Aliquam laoreet ante eget turpis tincidunt rutrum. Nam consequat venenatis faucibus. Nullam suscipit, ex in fermentum auctor, magna ipsum pulvinar velit, rhoncus consequat eros urna vel lacus. Vestibulum sed ligula ultricies, posuere quam eu, luctus arcu. Nulla facilisi. Nullam viverra suscipit elit vitae consectetur. Sed pellentesque convallis dolor a convallis. Vestibulum pharetra ligula ac mauris vehicula, sed finibus ex auctor. Integer ante tellus, condimentum et nunc eget, sodales vestibulum sapien. Praesent id viverra urna, non mattis risus. Donec et turpis vitae urna consectetur rutrum vitae at sem. Nam ut blandit massa, id aliquet justo.

Proin rhoncus euismod massa, a accumsan odio rutrum convallis. Sed metus eros, viverra at enim nec, iaculis maximus massa. Aenean congue ullamcorper ante, eu varius nulla iaculis vel. Maecenas mattis nulla nec maximus euismod. Donec laoreet augue in suscipit rhoncus. Vivamus a mauris ut sapien dapibus sodales. Mauris ante orci, gravida in leo non, ultricies dignissim est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam semper ac turpis at ornare. Morbi quis mauris pretium, pulvinar felis in, accumsan dui. Aliquam vitae sapien vehicula, pulvinar justo molestie, cursus tellus. In ex lacus, euismod ac luctus vitae, venenatis vitae nulla.

Suspendisse ut sem tincidunt, malesuada velit quis, ullamcorper mi. Ut vestibulum luctus odio, eu suscipit velit dictum quis. Nulla pellentesque id lorem vel iaculis. Phasellus volutpat diam lacus, et dictum felis elementum nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum tristique diam id dui convallis convallis. Ut metus est, pellentesque et aliquam in, vulputate at mi. Nunc sit amet hendrerit augue. Nam lobortis faucibus arcu, non vehicula nibh ultricies vitae. Nunc tellus metus, sagittis eu molestie sit amet, fringilla vitae nunc. Fusce convallis sapien sed hendrerit tincidunt. Sed dignissim in dui at pharetra. In hac habitasse platea dictumst. Pellentesque semper lacus id elit efficitur, eu fringilla ligula sagittis. Etiam dignissim ac mi nec laoreet.

Aenean eget convallis odio, sed condimentum tortor. Maecenas iaculis orci non cursus laoreet. Nullam a libero consectetur, congue arcu sit amet, interdum elit. Integer lacinia, erat non consequat volutpat, nisl erat venenatis urna, vitae mattis leo augue in lacus. Donec tincidunt porttitor feugiat. Sed eu magna quis massa dictum vulputate. Phasellus et condimentum lorem, pellentesque vestibulum ipsum. Morbi malesuada nulla et quam euismod egestas. Suspendisse potenti. Aliquam erat volutpat. Praesent congue felis egestas aliquam placerat.

Pellentesque eget erat in dolor consectetur tincidunt eget non ipsum. Maecenas mollis quis sem eget ullamcorper. Nam justo justo, porta a neque efficitur, mattis sollicitudin dolor. Donec mattis turpis vel maximus ultrices. Duis ligula lacus, malesuada aliquet molestie a, sodales non leo. Maecenas dictum hendrerit risus et viverra. Fusce vitae tincidunt urna, eu hendrerit quam. Etiam fringilla commodo nibh sed lobortis.

Phasellus cursus suscipit lorem vel tincidunt. Sed viverra pretium aliquet. Aliquam nisl tellus, hendrerit vel euismod quis, finibus eu libero. Donec consectetur facilisis augue, ut pretium ante efficitur ac. Pellentesque ac congue risus, lacinia ornare nisl. Proin at sem non ex consectetur consectetur id non magna. Morbi pellentesque pellentesque est sit amet venenatis. Sed justo enim, mattis a luctus nec, aliquam ut est. Nulla arcu ex, gravida nec nulla eu, pellentesque placerat ipsum. Aliquam blandit arcu orci, sit amet pharetra augue placerat id. Donec egestas tincidunt auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin ut elit volutpat, fermentum mi id, commodo orci. Pellentesque finibus mollis eleifend. Mauris nibh enim, sagittis sed feugiat sed, convallis sit amet justo. Sed sapien eros, hendrerit quis urna ac, mattis vehicula enim.</p>
</div>
<div class="container">
	<img data-src="https://via.placeholder.com/350x350" alt="">
</div>

<div class="container">
	<img data-src="https://via.placeholder.com/450x450" alt="">
</div>

<div class="container">
	<img data-src="https://via.placeholder.com/550x550" alt="">
</div>
.container {
	margin-top: 230vh;
}
const container = document.querySelectorAll(".container")

container.forEach(f => {
	let observer = new IntersectionObserver(entries => {
		entries.forEach(entry => {
			const { isIntersecting } = entry
			
			if(isIntersecting) {
				f.children[0].src = f.children[0].dataset.src
				observer = observer.disconnect()
			}
		}, {
			root: f
		})
	})

	observer.observe(f)
})

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.