Best way to preload images in a game?

Help and Feedback Scripting Support
#1

Hey, so I made a custom loading screen instead of the default Roblox one for my game, where it preloads all the image assets in the main interface. However, I just noticed they still appear blank for a few seconds before their image loads. Just noticed this recently.

What’s the most ideal way to preload image assets for a loading system?

Thanks :slight_smile:

2 Likes
How can I check to see if an Image ID is valid?
#2

The most ideal way to preload images would be to make a separate loading GUI where you preload the images the user sees first when joining your game. In the loading GUI script, you can have a table of images to preload from the GUI and then iterate through them like so:

local ContentProvider = game:GetService("ContentProvider") 

local ImagesToPreload = {...} -- array
local ImagesLeft = #ImagesToPreload


ContentProvider:PreloadAsync(ImagesToPreload, function()
	ImagesLeft = ImagesLeft - 1 -- keeping count if you want to add some accuracy to a loading bar or something
end)

-- initialize main menu here

Make sure not to overuse the PreloadAsync as it’d take the point away from even using it if you pass unnecessary stuff to preload in there.

One more thing, you should also take into account how long preloading is taking for users with a bad connection. If it takes over a certain amount of seconds, for example 10, you should probably just skip the preloading and have things load in your game based on the user’s connection in actual gameplay.

10 Likes
#3

The code you provided is pretty similar to what I’m doing, although one difference is that I pass in the instances in the GUI directly, as there’s sooo many image URLs I’d have to input into the table.

This is very odd though, because it’s like this doesn’t preload anything at all. It still takes a few seconds for elements to load in, when I click on a new frame to open or something. :confused:

2 Likes
#4

Try this.

local ContentProvider = game:GetService("ContentProvider")

local preload = {}
for i,v in pairs(script:FindFirstAncestorWhichIsA("ScreenGui"):GetDescendants()) do
	if v:IsA("ImageLabel") then table.insert(preload, v.Image) end
end

ContentProvider:PreloadAsync(preload)

-- or if line 8 doesnt work try:

for _,v in pairs(preload) do
	ContentProvider:PreloadAsync({v})
end
#5

Pretty sure you’re just preloading the ImageLabel object, and not the image itself.

1 Like