Placeholder showing instead of database images on live page, until refreshed.

Ask the community
,
1

I’m building an online gallery for an artist. Occasionally the live site shows the repeater’s image placeholder instead of actual content, though the correct text comes through. This is resolved when the page is refreshed. It happens on pages with 5 images or 60 images (all reduced to lowest file size). I’ve tried Chrome and Safari, cleared history and cookies, on desktop and laptop, and it still happens, but only sometimes. This can’t happen when the site goes live.

https://smcdee.wixsite.com/davidbensonpaintings/scotland
Screenshots below - any thoughts anyone?

Many thanks
Sarah

Image placeholders showing:

999×743 72.2 KB

How it should be:

1034×710 82.8 KB

2

Try collapsing or hiding gallery on load then try adding an onReady for the dataset. Example: after dataset is ready, then show the gallery.

This way you can make sure that the dataset has finished loading all data.

3

Thanks so much, I’m glad there may be a solution. I’m a novice in code and learning. I collapsed the gallery (just learned what that meant by watching one of your YouTube videos!), I read the link on onReady, but I’m feeling in the dark a bit. I don’t know how to tell it to ‘load gallery’. Here’s my code… I tried using ‘loadPage’.

I really appreciate your help, thanks again.

$w.onReady( function () {
//TODO: write your page related code here…
let mode = $w( “#image1” ).fitMode; // “fixedWidth”
$w( “#image1” ).fitMode = “fixedWidth” ;
});
import {local} from ‘wix-storage’ ;

const linkField = “link-portfolio-title” ; // replace this value

$w.onReady( function () {
$w( “#dataset3” ).onReady(() => {
const numberOfItems = $w( “#dataset3” ).getTotalCount();

$w( "#dataset3" ).getItems( 0 , numberOfItems) 
  .then( (result) => {

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem( ‘dynamicPageURLs’ , dynamicPageURLs);
} )
. catch ( (err) => {
console.log(err.code, err.message);
} );
} );
} );

$w.onReady( function () {
$w( “#dataset3” ).onReady( () => {
$w( “#image1” ).tooltip = “” ;
})
})

$w( “#dataset3” ).onReady( () => {
console.log( “loadPage” );
} );

4

Thanks for watching my videos! I hope they help.

So I am running late and I am on my phone. I tried to scribble some notes for you.

Dont have more than 1 onReady for the page.

Dont add dataset onReady more than once.

Move your extra lines to the same onReady.

Add the .expand for the gallery.

909×1920 225 KB

5

This is awesome, thank you, I’m going to try it now. Coding on the hop, you’re a genius.

6

I’ve tried this and the gallery expands ok, tooltips hidden ok, but images still showing placeholders on first loading. I think I’m close but obviously missing something…

$w.onReady( function () {
//TODO: write your page related code here…

let mode = $w( “#image1” ).fitMode; // “fixedWidth”
$w( “#image1” ).fitMode = “fixedWidth” ;

const numberOfItems = $w( “#dataset1” ).getTotalCount();

$w( "#dataset1" ).onReady( () => { 
  $w( "#image1" ).tooltip =  "" ; 
  $w( "#repeater1" ).expand(); 
  $w( "#dataset1" ).getItems( 0 , numberOfItems) 
  .then( (result) => {

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem( ‘dynamicPageURLs’ , dynamicPageURLs);
} )
. catch ( (err) => {
console.log(err.code, err.message);
} );
})

});

import {local} from ‘wix-storage’ ;

const linkField = “link-portfolio-title” ; // replace this value

7

I am back on my computer.

Now that I am visiting your page, I can see it loads fine for me. Though it seems like you are trying to load all records at once. You may consider limiting initial number or records and then adding a load more button or auto-load using code (aka Lazy Loading).

Also, was is it that you were trying to do with that extra code for dynamic page Urls?

8

Bless you Nayeli. I’m glad it looks good your end, and I’ll research Lazy Loading. Also glad I seem to have got most of the code right (your clear instructions).

The extra code for dynamic page Urls - no idea where that came from, inherited from copying some other code probably. I’ll take it out.

I have a lot to learn and I’m grateful for your quick and efficient help.

9

In that case … remove all the extra lines of code you don’t need and add the semi colon at the end of your dataset on ready.

740×837 58.4 KB

P.s. Check out my blog post about offering Corvid services to get extra revenue. I am only guessing you are doing this site for a client, so if you are and if you would like extra tips on what to do …that should give you bits of advice (that has helped me create my Corvid business from nothing).

10

Thank you very much. I’ve realised where that extra code came from, it’s for a ‘Next/Previous’ function. I’ve put it back but tidier, and wiser!

11

Sorry to be back but it’s still a problem - maybe it’s a small thing to fix? The site is now upgraded and connected to its domain, the issue has improved but it’s still happening on the page with 50 images on it. We don’t want to split them up. https://www.davidbensonpaintings.co.uk/scottishscenes

989×785 305 KB

Here’s my code. The other stuff on here is to control previous and next buttons on a dynamic page. Have I missed something or put something in the wrong place? Thanks for your help.

import { local } from ‘wix-storage’ ;

const linkField = “link-portfolio-title” ; // replace this value

$w.onReady( function () {

//TODO: write your page related code here…

$w( “#dataset2” ).onReady(() => {

$w( "#repeater1" ).expand(); 
$w( "#image1" ).tooltip =  "" ;

const numberOfItems = $w( “#dataset2” ).getTotalCount();

$w( "#dataset2" ).getItems( 0 , numberOfItems) 
  .then((result) => {

const dynamicPageURLs = result.items.map(item => item[linkField]);
local.setItem( ‘dynamicPageURLs’ , dynamicPageURLs);
})
. catch ((err) => {
console.log(err.code, err.message);
});

let mode = $w( “#image1” ).fitMode; // “fixedWidth”
$w( “#image1” ).fitMode = “fixedWidth” ;

});

});

12

Please could somebody help - it’s happening often now, we can’t launch the website this way.

13

@smcdee Hello Sarah … there id nithing wrong or missing from your code, it may have to do with your configuration.

You are most likely attempting to load a large amount of records at once. Try a smaller number and load more after that. A good number to display is the number of items that fit above the fold. You can load more via button click or another automated way (such as lazy loading method).