random infinite scrolling from data - javascript

I'm making a site that will show an endless series of images. The random list of images would be produced by a php script reading urls from a .txt. In the client side I need to show this images in different divs with random size and position. The question is: I had to produce a list that I insert in the rendered html that the JS could take? any direction for this JS that reads the urls and creates divs on the fly with random width/margins while scrolling?
excuse the noobness. and thanks a lot for any help.

The PHP script will execute ONCE at the loading of the website, so unless you're using ajax calls or something, you can't just output an "infinite" amount of data with PHP because you will sooner or later timeout.
You should use jQuery and learn how to use $.ajax to call the php to load more images using jQuery append. That should be an easy and clean way to do it (calling the event everytime the user reach the bottom of the website.

You can use some kind of infinite loading library like masonry. Here is the example demo here. It's help material can be seen here.

Related

get source code of whole website - which loads additional content after scrolling down

I want to fetch this site
https://www.film-fish.com/modern-mindless-action
to fetch the IMDB IDs of all movies listed there.
The problem is that the page loads all movies listed there just after scrolling down. So, a simple wget doesn't work.
Even if I scroll to the bottom of the page and view the source code, I do not see the last movie in the list (Hard Kill (2020)).
So the problem seems to be that the content is being created via JavaScript.
Has anybody a tip on how to achieve that?
So the problem seems to be that the content is being created via a js
script. Has anybody a tip on how to achieve that?
Indeed, executing JavaScript code is beyond scope of GNU Wget. You would need browser automation tool. If you know some Node.js or JavaScript I suggest taking look at PhantomJS Quick Start, Page Automation. Please take look at first example in 2nd link, you should be probably able to rework to your needs, i.e. instruct page to scroll down using JavaScript then extract what you need using JavaScript.

Load previous or next images without reloading page

I'm building a simple gallery system using predominantly PHP and MySQL. One of the requirements is for moving to the next image using keyboard arrow keys.
When doing this, the next or previous image should load into the image div without reloading the entire page.
The choice of which image to show is based on PHP GET using a URL structure like below, where 273 is the photo ID in the database:
/photos/photo.php?id=273
This is the code for housing the image:
<div class='single-image-container'>
<img src='/photos/" . $row["event_id"] . "/" . $row["filename"] . "' />
</div>
Is there a straightforward method to load the next image into the div 'single-image-container' when the right arrow key is pressed, by incrementing the value in the GET? The image filenames are in the format of event_id-id.jpg, i.e. 1983-101.jpg, 1983-102.jpg and so on.
The goal is also to update the browser URL with the updated id.
I'm a little bit at sea with this one and wondered if someone has some pointers. Thanks.
No there is no way (apart from iframe witching). Php is a server-side programming language. If you want new data from the server you have to reload the page first. But no problem, there is javascript. You can load all images directly with php and hide the unnecessary ones with javascript. Then you can build your own control (it's not that hard) or choose one of the hundreds of javascript slider libraries.
If you want to try it yourself, this will help you:
https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/
But the slider from this tutorial does not support keyboard. But you can use that: addEventListener("keydown", event =>
https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event
If you want a library. I have used the splide-slider quite often and know that it is easy to use.
https://splidejs.com/

Is there a way to change the background of an image with js after a ajax call?

I have a page that creates a 36 page book with php, ant then shows it to the user using a flipbook.js. Since the book is so big, the page takes a long time to load (something like 15 seconds), so I thought make the page create only 5 book pages, and then creating the rest using ajax so that the user doesn't wait too much. The problem is that when i create the other pages and i try to change the background using jquery on the ajax.success function the page doesn't show the images.
If i do this with normal images using the src instead of the background it works.
Can anybody help me find a way?
thanks.
why don't you just add the normal images by jquery on ajax success if that's been working for you?
a simple idea of how to add src to an image would be:
$('image_selector').attr('src', $src);
Makes sense?

jquery first time page loading issue

When I first time load my website then images are jumping on each other
but when I refresh them it will look normal as I need it .
To see first time output of mixed images jumping on each other use
ctrl+shift+r
Jquery is creating problem when I load the website first time?
Any help would be appriciated.
This is not a jQuery issue. This is a network download issue. By hard refreshing (ctrl+shift+r), you are forcing the browser to re-download CSS assets, which increases the amount of time before it can properly style the page.
There is a front end design tactic that might suit you well in this scenario.
You have two sections that are "above-the-fold" when you first load the page. Instead of downloading an external stylesheet before rendering and painting these two sections, you can extract the "critical" CSS to a block in your HTML.
This ensures your CSS is there without wasting time with another HTTP request. For more information on what critical CSS is, I'd recommend this article: https://www.smashingmagazine.com/2015/08/understanding-critical-css/#what-is-critical-css

Jquery / Javascript — How to optimise my site load visually?

I'm making finishing touches on my site and am struggling to make the load of the page look less jumpy. best way to show you what i mean is to show the site:
http://marckremers.com/2011 (Still not complete, in alpha phase)
As you can see the contents sticks to the left, loads a ton of jquery and images into the page, and only then click into place (centre).
I'm wondering if there is a way i can make it click into place first and then load the elements?
I tried putting the reposition script just after , not even that works.
Any ideas? Thanks
With all of the images you have, your page is 1.5mb, coupled with 70 http requests. No wonder your site behaves the way it does.
You should be using sprites on the smaller images to reduce http requests and as far as the large images go, you are loading all of the pictures at once. Even the ones that aren't displayed right away. The images that aren't displayed right away should be pulled in via AJAX after the page loads.
If you want to go further into optimization I would also:
Use one external javascript file. Yes
it increases size, but I favor that
over http requests.
Minify your html/javascript/css.
Don't host jQuery on your site, use a CDN such as Google APIS.
Check out a service similiar to Amazon S3.
I could reinvent the web site best practices wheel here, or I could send you to Yahoo best practices for web site optimization There is a ton of very important information there, read it and reference it.
You loaded jQuery twice, once from your own site and another time from Google's CDN. For starters, you should probably move all the JavaScript to the bottom of your HTML. Then you need to optimize your if ... else that handles how many columns to display and your Google Maps iframe.
To speed the visual up, instead of using jQuery, you should probably have some vanilla DOM scripting that dynamically creates some CSS styles for the projects and tb_tweets classes, so it doesn't have to wait for all your JavaScript to load before handling resizing of your projects and tb_tweets.
use http://mir.aculo.us/dom-monster/ and do everything it tells you to do. If you want tools to figure out what is going on during page load, the chrome developer tools are hands down the best out there for client side optimization.
A think you could do is put your javascript functions in the document.ready(function()), this way the functions will be loaded AFTER the page is loaded. I guess you don't need the functions for loading the site, just to interact with it?
Generally you only want to trigger your events after the page has rendered, i.e., using
$(document).ready(function()) {
//your javascript goes here
}
Then, in your HTML you have placeholders so the page doesn't "expand" or "jump" as you put, with some kind of indication that the element is still loading. Then, when your ajax requests complete, simply populate the placeholders with the ajax response.

Categories

Resources