Swiper display issue where blank card is displayed briefly

HI All

Front page of site contains a swiper populated dynamically with the contents displayed in a BS card

On page load, a blank card is shown briefly until the data is loaded as below (images are lazyloaded)

image

Until the data is displayed as below

Does anyone have a method of suppressing the initial blank card display until the data has loaded?

Site is at https://bookastudentroom.com/

There is some huge delay before the data is loaded on your page.
Are you getting these records from a database or from some API?

Can you copy this page to another test one and remove the tawk.to script as it seems to me it takes quite too much time to load, which slows down your page load?

And your server action loads really fast: https://bookastudentroom.com/dmxConnect/api/frontpage/assetlist.php

Tawk was in footer so just removed the footer…

https://bookastudentroom.com/dev_index.php

Data from database

query
SELECT roomtypes.RoomType, roomprices.Checkin, roomprices.Weeks, roomprices.Price, hall.Account_Name, agent.Account_Name AS Agent, hall.complete AS HallComplete, rooms.RoomID, roomimages.imageName AS RoomImage, roomimages.RoomID AS ImageRoom, roomimages.ID AS ImageBuilding, rooms.complete AS RoomComplete, buildingimages.imageName AS HallImage, hall.ID AS HallID, rooms.Description AS RoomDescription, hall.Description AS HallDescription, hall.City, agent.ID AS AgentID, roomprices.AcademicYear, hall.lat, hall.lng, roomprices.PriceID, icons.iconName FROM roomprices INNER JOIN roomtypes ON (roomtypes.RTID = roomprices.RoomType)
INNER JOIN agents AS hall ON (hall.ID = roomprices.BuildingID)
INNER JOIN agents AS agent ON (agent.ID = hall.ParentID) INNER JOIN rooms ON (rooms.RoomTypeID = roomprices.RoomType AND rooms.ID = hall.ID)
LEFT JOIN roomimages ON (roomimages.RoomID = rooms.RoomID)
LEFT JOIN buildingimages ON (buildingimages.ID = hall.ID)
LEFT JOIN icons ON (icons.IconID = hall.IconID)
WHERE roomimages.featured = 1 AND buildingimages.featured = 1 AND hall.City LIKE :varSearchcity ORDER BY roomprices.randomiser ASC",

For info, gtmetrix report on home page in case it helps



You can try this: Dmx-show not working initially
Hide the element until data is available.

Good hint thanks @nshkrsh
Ironically the latest swiper update sees to have resolved this issue anyway

1 Like