Automated image rotation

Hello, how are you all doing? I encountered an issue - I have a website with a div named "mosaicdiv". This div contains sub-divs with links and images. I want these images and links to change automatically at random intervals to others from the database. So, I attempted to achieve this using ajax:

<? $fdata = DisplayFeaturedMembers(15); ?>
    <div id="mosaicdiv" style="width:70%; height: 330px; float:left;">
    // More HTML code here

The current solution is causing an immediate spike in server load. Is there something wrong with the code provided above? Should I consider creating a JavaScript array instead and work with that? If so, could you offer some guidance on that?

Thank you very much!

javascriptajaxfadeimage

Answer №1

This seems more intricate than necessary. I'm not very knowledgeable about prototype.js, which seems to be what you're using. By checking the documentation for PeriodicalExecuter, it appears to be a wrapper around setInterval. It seems like you might have confused it with setTimeout. Unlike setTimeout, setInterval continues running indefinitely until stopped.

You're creating 15 instances of PeriodicalExecuter for each of the 15 divs, resulting in 225 calls at whatever interval is set!

I'm unsure of your goals with this code. Are you attempting to recreate Apple's album art screensaver?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of jQuery.ajax() not sending data when combined with window.onbeforeunload

I am working on capturing data about the number of clicks and the duration a visitor spends on my website. To achieve this, I am using an AJAX call to send the data to my PHP file as shown below: window.onbeforeunload = function(){ var endTime = new D ...

javascriptphpajaxjquery

Whenever I attempt to use .ajax to post to an MVC 4 controller, the ViewModel is consistently null

My jQuery/HTML: @using(Html.BeginForm("Create", "Home", FormMethod.Post)) { <input name="ImageName" id="ImageName" type="hidden" /> <input name="XPos" id="XPos" type="hidden" /> <input name="YPos" id="YPos" type="hidden" /> ...

c#jqueryajaxasp.net-mvcjson

Learn the steps to integrate Infinite Scrolling with Node.js, Angular.js, and Firebase!

UPDATE 8: CODE: <% include ../partials/header %> <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script> <script src="https://cdn.firebase.com/libs/firebase-util/0.2.5/firebase-util.min.js"></script> & ...

javascriptangularjsnode.jsfirebasefirebase-realtime-database

Angular unable to properly display image

When trying to display an image in my Angular 6 app using the following line of code: <img src="https://unsplash.com/photos/DOrhbkYbFkg"> Instead of the expected picture, only a small square with a question mark is displayed: https://i.sstatic.net ...

angularimage

Tips for reducing the output value using jQuery

Hey there, I am displaying a value using jQuery and would like to reduce the decimal places. The current value being shown is: 6.333333333333333 I want it to be displayed like this instead: 6.3 Does anyone know how to achieve this? I couldn't ...

javascriptjquerynode.jsexpress

Searching for a specific value in an array with jQuery: A step-by-step guide

I am looking to search for a specific value within an array and retrieve its index. Sample HTML: <div class="container"> <div class="col-md-6"> <div id="task0">Task0</div> </div> <div class="col-md-6"> &l ...

javascriptjqueryarrays

The API response in JSON format is displaying as "undefined"

My current code is running as follows: const request = require('request') const apiKey = 'XXXXXXXXXXXXXX' var dat; let url = 'http://api.worldweatheronline.com/premium/v1/marine.ashx' let qs = { q: '-34.48,150.92&ap ...

javascriptjson

Smartlook fails to correctly store user consent

I am currently working on integrating Smartlook into our website. Since we are using React, I am unable to follow the suggested steps in the documentation which can be found here. Our implementation involves initializing Smartlook using a script tag in th ...

javascriptreactjstracker

Storing information from a CSV file in a universal variable (fast-csv/papaparse)

I am a newcomer to JavaScript and I'm attempting to parse a CSV file in the backend using node.js. I have an array of states where I intend to store data from a specific column of the CSV. The code I have written using fast-csv seems simple enough, b ...

javascriptnode.jscsvpapaparsenode-csv-parse

Is there a way to prevent my <div> from scrolling when the mouse hovers over it?

I currently have a div that is set to scroll infinitely using JavaScript: <script language="javascript"> i = 0 var speed = 1 function scroll() { i = i + speed var div = document.getElementById("content") div.scrol ...

javascriptjquerycssscrollonmouseover

A method for duplicating the package.json file into the dist directory while excluding the scripts section

My current webpack setup involves copying the package.json to the dist folder using the CopyWebpackPlugin. (...) plugins: [ new CopyPlugin({ patterns: [{ from: "package.json", to: "dist&quo ...

javascriptjsonnpmwebpackpackage

How about inputting some text into a field?

Below is the code snippet for your reference: <div class="col-xs-12 col-sm-9"> <input id="Shipping_FirstName" name="firstname" ng-model="userOrder.Shipping.FirstName" type="text" class="form-control nsg-form--input ng-pristine ng-untouc ...

javascriptangularjsdom

Incorporating a separate Controller and view into a single controller and view using Ajax with the CakePHP

I have three controllers in my app: Forms Attributes Users When posting data on /forms/designpage, I use the following code: $.ajax({ type: "POST", url: "./attributes/untitledfieldname", data: "sequence_no = " + counter + " & type = " + ...

ajaxcakephp

Guide on sending a JSON object to web2py through JQuery Ajax

I have successfully utilized a similar method in .NET to exchange data between client and server using JSON objects bidirectionally. Now, I am aiming to implement something akin to this in web2py. Web2py does support the return of JSON objects and offers j ...

ajaxjsonweb2py

Unable to delete product from shopping cart within React Redux reducer

Currently, I am tackling the challenge of fixing a bug in the shopping cart feature of an e-commerce website I'm working on. The issue lies with the remove functionality not functioning as expected. Within the state, there are cartItems that can be ad ...

javascriptreactjsredux

JavaScript code for sorting a table based on a time interval

There is an index file with a flight schedule table. The table allows sorting by airline and departure time, as well as filtering by airline name. I'm trying to figure out how to add filtering by time range, specifically departing flights between 8 AM ...

javascripthtml

manipulating the flow of callback functions using jQuery

When the function socialbookmarksTableData(data) is called by another function, it generates the content of a table using data in JSON format. Inside this function, two other functions are called which use getJSON and POST methods to retrieve some data. ...

javascriptjquery-uijquery

Jquery encountered a syntax error when a new variable was introduced into the code

I recently implemented a Jquery script to create a drop-down div. $("#top<?php echo $this->$i?>").click(function(){ $("#down<?php echo $this->$i?>").slideToggle("slow","swing",500); }); }); However, this seems to be ca ...

javascriptphpjquerygoogle-chrome

Utilizing autocomplete functionality across multiple fields with API integration in Django Rest Framework

Currently, I am facing an issue with filtering the API list using auto-completion. I have successfully managed to filter based on a single field but struggling with filtering on multiple fields. Here is the HTML code snippet: <div class="form-group"&g ...

jqueryajaxdjangopython-3.xdjango-rest-framework

JavaScript file slicing leads to generating an empty blob

I am currently working on a web-based chunked file uploader. The file is opened using the <input type="file" id="fileSelector" /> element, and the following simplified code snippet is used: $('#fileSelector').on('change', functio ...

javascripthtmlchunking