<style>
.picture {
overflow-x: scroll;
border: 1px solid red;
width: 200px;
}
.wrap {
width: 600px;
}
.picture img {
width: 200px;
}
</style>
</head>
<body>
<div class="picture">
<div class="wrap">
<img data-src="1.jpg"><img data-src="2.jpg"><img data-src="3.jpg">
</div>
</div>
<script>
var picture = document.querySelector('.picture'),
img = document.querySelectorAll('.picture img');
function visible() {
img.forEach(el => {
if (!el.src && el.getBoundingClientRect().left - picture.offsetWidth < 0) el.src = el.dataset.src;
});
}
visible();
picture.onscroll = visible;
</script>
вот самый простой способ