Currently, I am in the process of constructing a carousel using data retrieved from an endpoint. The challenge I face is determining the appropriate image size to request from the server. To address this, I perform some front-end processing to dynamically decide the size of each image to use. Subsequently, I hide images that are not selected for display. However, my performance is being impacted as the display:none method still triggers HTTP requests. I attempted using remove() instead of .css('display','none');, but encountered issues since both methods remove other images due to the shared class.
Is there a way to remove specific images within the loop without affecting others?
This is the sample data fetched from the server (components).
<div class="foo-grid-img">
<img src="https://cdn.com/image/1.jpg" class="foo-big" />
<img src="https://cdn.com/image/2.jpg" class="foo-small" />
<img src="https://cdn.com/image/3.jpg" class="foo-horizontal" />
<img src="https://cdn.com/image/4.jpg" class="foo-vertical" />
</div>
<div class="foo-grid-img">
<img src="https://cdn.com/image/a.jpg" class="foo-big" />
<img src="https://cdn.com/image/b.jpg" class="foo-small" />
<img src="https://cdn.com/image/c.jpg" class="foo-horizontal" />
<img src="https://cdn.com/image/d.jpg" class="foo-vertical" />
</div>
var fooConf = [['big'],['vertical','big'],['small','small','horizontal'],['vertical','big','horizontal','horizontal'],['vertical','big','horizontal','small','small']];
for (var i = 0; i < components.length; i++) {
// elided
var fooClass = fooConf[components.length-1][i];
if("foo-"+fooClass != fooBig.attr("class")) {
cItem.find('.foo-big').css('display','none');
}
if("foo-"+fooClass != fooSmall.attr("class")) {
cItem.find('.foo-small').css('display','none');
}
if("foo-"+fooClass != fooHorizontal.attr("class")) {
cItem.find('.foo-horizontal').css('display','none');
}
if("foo-"+fooClass != fooVertical.attr("class")) {
cItem.find('.foo-vertical').css('display','none');
}
}
The desired outcome after processing should resemble the following HTML structure:
<div class="foo-grid-img">
<img src="https://cdn.com/image/1.jpg" class="foo-big" />
</div>
<div class="foo-grid-img">
<img src="https://cdn.com/image/d.jpg" class="foo-vertical" />
</div>