You would need to go back to the original load code, before you removed the img and css parts from it.
Here:
What do I do next?
I have images set here as examples to get it to work.
They will be loaded in the background until they are needed.
We’ll need to look inside inspect to see if the images are loaded, if they are, that means it’s working.
load.img1("https://i.imgur.com/AJDZEOX.jpg")
load.img2("https://i.imgur.com/UzRn6Qx.png")
load.img3("https://i.imgur.com/WzHsnG7.png")
load.img4("https://i.imgur.com/92kMrMf.jpg")
load.img5("https://i.imgur.com/fOfpsiC.png")
Then there’s this piece that goes last:
imageLoad.init({
image: document.querySelector(".image")
});
Code:
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
Would I be doing something like this?
const load = (function makeLoad() {
"use strict";
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
const imageLoad = (function makeImageLoad() {
"use strict";
function init(image) {
if (document.images) {
img1 = new Image();
load.img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
load.img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
load.img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
load.img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
load.img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
imageLoad.init({
image: document.querySelector(".image")
});
We were able to get this to work in the javascript on page load:
<script type="text/javascript" src="https://www.youtube.com/player_api"></script>
How would we do the same thing using images?
<script>
if (document.images) {
img1 = new Image();
img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
</script>
Utilizing the same javascript code:
img: _load("img")
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
Well, they do give usage information on the Create a Basic Loader page that you linked to earlier.
I can’t use this for the videos and the images?
The videos are already working off this one,
I wanted to add a section for images also.
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
No you can’t use that code. You would need instead use the code that originally came from the https://davidwalsh.name/javascript-loader webpage.
This did originally come from that webpage:
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
Oh good, then yes you can use that.
1 Like
This is how the single video code was done:
I suspect images would be set up differently.
This would need to be added to the javascript:
<script>
if (document.images) {
img1 = new Image();
img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
</script>
I was thinking set up something like this:
function init(image) {
if (document.images) {
img1 = new Image();
load.img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
load.img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
load.img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
load.img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
load.img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
This would go with it:
imageLoad.init({
image: document.querySelector(".image")
});
How am I going to set this up?
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
We’ll know it’s working when we’re able to see the images cached inside inspect on page load.
I don’t know how this would be set up though: #31
How the code would be set up.
That would be with load.img("https://i.imgur.com/AJDZEOX.jpg") which loads and shows the image at the bottom of the page.
I don’t want the images to load though, I just want them to be cached.
For until they are needed.
Like this?
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
load.img("https://i.imgur.com/AJDZEOX.jpg")
load.img("https://i.imgur.com/UzRn6Qx.png")
load.img("https://i.imgur.com/96Q10GA.png")
load.img("https://i.imgur.com/WzHsnG7.png")
load.img("https://i.imgur.com/92kMrMf.jpg")
This is the images cached until they are needed.
I would want to move this into the javascript
<script>
if (document.images) {
img1 = new Image();
img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
</script>
This is the images loading on the screen.
Not the images cached for when they are needed.
const load = (function makeLoad() {
"use strict";
function _load(tag) {
return function(url) {
return new Promise(function(resolve, reject) {
const element = document.createElement(tag);
const parent = "body";
const attr = "src";
element.onload = function() {
resolve(url);
};
element.onerror = function() {
reject(url);
};
switch (tag) {
case "script":
element.async = true;
break;
case "link":
element.type = "text/css";
element.rel = "stylesheet";
attr = "href";
parent = "head";
}
element[attr] = url;
document[parent].appendChild(element);
});
};
}
return {
css: _load("link"),
js: _load("script"),
img: _load("img")
}
})();
load.img("https://i.imgur.com/AJDZEOX.jpg")
load.img("https://i.imgur.com/UzRn6Qx.png")
load.img("https://i.imgur.com/96Q10GA.png")
load.img("https://i.imgur.com/WzHsnG7.png")
load.img("https://i.imgur.com/92kMrMf.jpg")
If I wanted to move this piece into the javascript, how would I set that up?
<script>
if (document.images) {
img1 = new Image();
img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
</script>
In that case, the load code is of no use for what you want to achieve, and some other solution needs to be found.
How would I move this into the javascript?
<script>
if (document.images) {
img1 = new Image();
img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
</script>
Copy and paste?
Oh! No, cut and paste to achieve a move.
1 Like
It doesn’t go inside a function, or anything like that?
if (document.images) {
img1 = new Image();
img1.src = "https://i.imgur.com/AJDZEOX.jpg";
img2 = new Image();
img2.src = "https://i.imgur.com/UzRn6Qx.png";
img3 = new Image();
img3.src = "https://i.imgur.com/96Q10GA.png";
img4 = new Image();
img4.src = "https://i.imgur.com/WzHsnG7.png";
img5 = new Image();
img5.src = "https://i.imgur.com/92kMrMf.jpg";
}
Why would it?