I have an exercise in which I need to make a page for my school, in this exercise I am tasked with making a page in which the user will be able to see faces from everyone in the class. I wanted to think "a little outside the box" and use https://thispersondoesnotexist.com to generated different faces.
I found https://fakeface.rest that allows me to give directions to thispersondoesnotexist.com allowing me to set an age range and a size for the image https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25
Here is my issue however: The page is loading every links at the same time and displaying the same image multiple times like this:
That's why I wanted to know if there was a way for me to load the two images at a different time so that they show a different "person" each time.
It would be preferable to avoid using js (html and CSS) but if this is the only solution then so be it: I'll use it
Ps: I tried using eager/lazy loading but that didn't work
Here I added an additional garbage parameter to each url, to make the urls different:
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart1">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart2">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart3">
<img src="https://fakeface.rest/thumb/view?minimum_age=16&maximum_age=25&blart4">
They actually tell you how to do that with the API:
If you want to insert multiple different faces and prevent the browser caching then you can append any number or random string to the end of the endpoint as follows:
https://fakeface.rest/face/view/1?gender=male
https://fakeface.rest/face/view/anythingcangohere_theapidoesntdoanythingwithit?gender=male
Source: inserting into html (scroll past the image)
Related
I'm trying to link an image on several different sites from a master, and I need to go 3 levels back. The URL i'm working with is: https://www.apsnet.org/meetings/annual/planthealth2020/hotel-travel/Pages/default.aspx and I need to go back to "planthealth2020"
I have Javascript from old projects that go 2 levels here:
onclick="javascript:window.location.href=window.location.pathname.split('/').slice(0,3).join('/')"
but i need to add one more level, but i'm not using a href="../../../" because if I'm on the homepage of this site (planthealth2020) I don't want a user to click on the image and get taken back an additional 3 levels.I don't know anything about javascipt. Any ideas?
You can simply do this using a link (an a tag). In the href attribute, ../ means 'go one level back'. The link below will therefore send you three levels back, from wherever you currently are:
Click here to go 3 levels back.
I don't see why it would be necessary to use an onclick attribute with javascript code.
Why are you using javascript for this at all? What you're describing is literally what HTML is designed to do without any outside help, using relative URLs:
<a href="../../../" title="back to plant health 2020">
<img src="whatever.jpg">
</a>
Done. If you need a navigational link, that's literally what <a> is for. And if you need to "go up X levels", that's literally what relative URLs are for. It might be time to shelve this work for a few hours and read through a refresher on what HTML is for and what it can do.
I stumbled across this weird situation(to me) where I might have an image in a html doc multiple time ... lets say 10 times the exact same image in one html file. I was curious what kind of optimization could be used here or if any exist.
some thoughts...
Only load visible first ?
Does the browser realize they are the same and more quickly load the pics?
whats good practice for a scenario like this?
To put a little more detail into the question I have essentially multiple web pages in one using some JavaScript to switch in content.
so i have:
<div id='Page1'>
<div id=masterheader ><img src=logo.png></div>
<img src=logo.png>
<!--content-->
</div
<div id='Page2'>
<div class=header></div>
<!--content-->
</div
Im using JavaScript to grab the inner html of the master_header and place that html in all the class headers... Im just worried as the amount of pages might grows significantly how will my page load be affected by my logo being rendered multiple times.
No worries - it will be cached as the same image.
Only 1 image is actually loaded I believe. You are just displaying the image multiple times.
Test it out.
Put the same image on the same page (so they are both displayed). Make sure it is a large image (2 or 3 mb) so that you can see if they both finish loading at the same time.
I've got a task I need to complete for an interview and I'm having issues with one annoying part. I have to create a portfolio site that displays 8 images at a time on the front page. These images need to be hyperlinks.
All the data I need (image location, url, title etc) is stored in an XML file. I've got all this data out and have successfully created a pagination Javascript animation that displays 8 images on a page with their relevant title.
What I'm struggling to do is make the images into hyperlinks, I'm sure the answer is staring me in the face but every time I try and add the hyperlinks it either stops displaying images or displays images but breaks the pagination and animation.
I've included the HTML, JS and CSS below, obviously given I haven't attached the XML you won't be able to see anything. I'm hoping some will know how to do this though!
Let me know if the XML is required..
http://jsfiddle.net/gFg56/1/ - Code
What its meant to look like with the images on the front page:
This should work
$('#portfolio-item').append('<li><img src="' + image + '" alt="' + title + '"></li>');
If it doesn't, can you post the error you get?
Bye
Do the images need to be hyperlinks really or just behave like them? Isn't the issue here based on the fact that you have to prevent the default behaviour of the hyperlink so you can handle the rendering in JavaScript and perhaps navigate to the linked URL using JavaScript?
If i look at Amazon Button to add items to lists on their site - you can see it here:
http://www.amazon.co.uk/wishlist/get-button
How does it work? I'm pretty sure it scrapes the page somehow but it seems to get every image whether its a flash image, jpg or anything, even when the site in question uses relative img src as opposed to absolute full site urls
Example page below, all images shown are jpg which is cool but all img src are relative meaning no "http://blah.com" before them
http://gadgets.guardianoffers.co.uk/p-788-Casio-Solar-Powered-Edifice-Watch.html
Is there a better way to get images other than parsing the html source?
Or are they just doing a million ifs if they don't get a hit straight away?
It looks like it parses the HTML of the page and looks for what is semantically identified as the primary image, name and price. For example, if you look at a page that doesn't have any ecommerce products, for example: http://www.theglobeandmail.com/ it takes the page h1 element as the product name and the primary image (front page story image) as the product image.
So behind the scenes they are doing a lot of guessing. Using HTML 5 semantic markup, you could establish a standard for this kind of thing, but unless everyone is using it, you are just making educated guesses.
Okay, so first some background info: I am trying to embed a webpage within another page. The sub-page is basically a small web application written in javascript and html that takes in several screens of input (radio buttons, text boxes, etc.) and gives a screen with results at the end. Each of these screens can be a different size.
There are two methods I have tried using to do the embedding:
1) Copy all of the html and javascript from the sub-page into the main page and stick it in a div/table/whatever.
2) Keep the sub-page in its own file and embed it using embed/object/iframe.
Using the first method the page behaves as it should; the only real problem (aside from being kind of a messy solution) is that the sub-page I am embedding is actually generated by an external application, and every so often the page is replaced with a newer version. This more or less rules out using the first method as a long-term solution.
Now the second method has its own problems. Since the embedded javascript page changes in height, the frame that is holding it needs to vary in size with it. I'm able to change the size using any of the solutions given here, however these do not update the size of the frame as the user progresses through each screen.
The closest solution I've been able to come up with so far is using a document.onclick handler to catch any clicking which might cause the next screen of the sub-page to come along. The handler pauses for a very short time (to allow the next screen to come up) and then calls the necessary resizing function. However this feels like a very hacky solution, and there is also a slightly noticeable delay during with the scroll bar shows up on the side of the frame when it hasn't expanded yet to fit the new content. I'm thinking there must be a better way to do this.
If the file is on the same server/domain, you could just load it in with jQuery. Here is some jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$('#id-of-div').load('/path/to/page.html');
});
</script>
Just change id-of-div to the id of the div that you want the page to be loaded into and change /path/to/page.html to the actual URL to the page. (you don't need the domain of it, just the path to it)
I hope this helps.
If this answers your question, please remember to click the checkmark next to this to accept this answer.