URGENT! Need way NOT to preload images

Posted on 2009-12-20
Last Modified: 2012-06-27
The code below works fine except all images are peloaded as the page loads. This is horrible because some areas have hundreds or even thousands of associated pages sometimes taking a minute or more to load.

So I need a way to load only a few images at a time or dynamically load only the images which are about to be displayed. This is based on Jquery, jCarousel Lite. The MouseWheel is turned on and I need to keep it that way.

What suggestions do you have and how me how to change my code to make this work without sacrificing the current funtionality.

lib.min.js is attached.
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


<html xmlns="">



<script type="text/javascript" src="/carousel/lib.min.js"></script>

<script type="text/javascript"> 

	$(function(){	// shorthand for $(document).ready() BTW

        $('div.demo').each(function() {

			// The text of the paragraphs in the rounded divs is also the

			// jQuery code needed to create that effect. Cosmic.

             eval($('p', this).text());


        $('#main p').wrap("<code></code>");



<style type="text/css">

body {

	font: Verdana, Arial, sans-serif;

	/* An explicit background color is required for Safari. */

	 /* Otherwise your corner chunks will come out black!    */

	background: #f8f0e0;


div.section {

	clear: left;


h1 {

	font-size: 150%;

	padding: 0


h2 {

	background: #ccc;

	padding: 1px 20px;


div.demo {

	float: left;

	width: 18em;

	padding: 20px;

	margin: 1em;

	background: #c92;


	text-align: left;

	font: verdana, arial, sans-serif;

} {

	margin: 2px;



<script type="text/javascript">

(function($) {                                          // Compliant with jquery.noConflict()

$.fn.jCarouselLite = function(o) {

    o = $.extend({

        btnPrev: null,

        btnNext: null,

        btnGo: null,

        mouseWheel: true,

        auto: 2000,

        speed: 2200,

        easing: 1000,

        vertical: false,

        circular: true,

        visible: 6,

        start: 0,

        scroll: 5,


        beforeStart: null,

        afterEnd: null

    }, o || {});

    return this.each(function() {                           // Returns the element collection. Chainable.

        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";

        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

        if(o.circular) {



            o.start += v;


        var li = $("li", ul), itemLength = li.size(), curr = o.start;

        div.css("visibility", "visible");

        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});

        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});

        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation

        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)

        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

        li.css({width: li.width(), height: li.height()});

        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images


            $(o.btnPrev).click(function() {

                return go(curr-o.scroll);



            $(o.btnNext).click(function() {

                return go(curr+o.scroll);



            $.each(o.btnGo, function(i, val) {

                $(val).click(function() {

                    return go(o.circular ? o.visible+i : i);



        if(o.mouseWheel && div.mousewheel)

            div.mousewheel(function(e, d) {

                return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);



            o.pause=setInterval(function() {






				o.pause=setInterval(function() {





        function vis() {

            return li.slice(curr).slice(0,v);


        function go(to) {

            if(!running) {


          , vis());

                if(o.circular) {            // If circular we are in first or last, then goto the other end

                    if(to<=o.start-v-1) {           // If first, then goto last

                        ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");

                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.

                        curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;

                    } else if(to>=itemLength-v+1) { // If last, then goto first

                        ul.css(animCss, -( (v) * liSize ) + "px" );

                        // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.

                        curr = to==itemLength-v+1 ? v+1 : v+o.scroll;

                    } else curr = to;

                } else {                    // If non-circular and to points to first or last, we just return.

                    if(to<0 || to>itemLength-v) return;

                    else curr = to;

                }                           // If neither overrides it, the curr will still be "to" and we can proceed.

                running = true;


                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,

                    function() {


                  , vis());

                        running = false;



                // Disable buttons when the carousel reaches the last/first, and enable when not

                if(!o.circular) {

                    $(o.btnPrev + "," + o.btnNext).removeClass("disabled");

                    $( (curr-o.scroll<0 && o.btnPrev)


                       (curr+o.scroll > itemLength-v && o.btnNext)






            return false;




function css(el, prop) {

    return parseInt($.css(el[0], prop)) || 0;


function width(el) {

    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');


function height(el) {

    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');





<script language="JavaScript" type="text/javascript">


$(function() {

    $(".main .jCarouselLite").jCarouselLite({

        btnNext: ".main .next",

        btnPrev: ".main .prev",

        speed:1000, // main speed

        easing: "easeinout",









<div class="carousel main">

    <div class="jCarouselLite" style="background-color:#eeeeee"> <a href="#" class="next"><img src="left.png" style="z-index: 2;position:relative;left:0px;top:77px" width="15" height="68" /></a>


<!--- Load page based on news area category --->

<cfquery name="GetStory" datasource="daily-news">

  select *

  from story

  where catid = #form.catinfo.catid#

  order by id desc


<cfoutput query="GetStory">

    <form action="read.cfm" method="post" name="Select Category">


            <input id="TheImage" type="image" src="#ImagePath#">





        <a href="/" class="prev"><img src="right.png" style="z-index: 2;position:relative;left:547px;top:-77px" width="15" height="68" /></a> </div>




Open in new window

Question by:Qsorb
    LVL 40

    Expert Comment

    what would you like to show initially then?
    Or would you like to load images sequentially after the page is loaded?

    Have you tried this?


    Author Comment

    >what would you like to show initially then?
    I'd prefer to load and show only six images, or load them just before they will be displayed so there's no delay or minimal delay.

    I looked at the link you gave but honestly, I'm not sure what to add or modify to make it work. Can you make a suggestion on how to do this, or at least modify the code in that link to fit what I need, or suggest something else? I'll try whatever you suggest.

    >would you like to load images sequentially
    Yes, just as the query calls it, ORDER BY ID DESC
    LVL 40

    Expert Comment

    'load them just before they will be displayed'
    Why don't you load the images on the fly by just changing the source of the image

    document.images['imageName'].src = ''; \\image url

    Only thing that you have load initially is the URL of the image


    Author Comment

    I'd give it a try if you'd show me where it  goes, exactly. There's no way I can tell where to place it. Just cut out a few lines of my code and place your suggestion into it  and post it here. Then I'll give it a try and attempt to understand it.

    But remember the image path is defined by ColdFusion as a variable from a cfquey output. It's all very nice for you to toss out a line of code but spending many hours attempting to find where to insert it is almost always the problem. And too often it's difficult because it has to go into a bit of JavaScript code and it's a cf variable.

    Author Comment

    Let's see if I can make this clearer. You probably already know exactly what I'm doing by the code I posted but I'd like to be sure because I need this ASAP.

    My SQL table may have several hundred items (rows) so each page in any particular category displays only 20 items at a time per page. It wouldn't make much sense for jcarousel image slider to run though just 20 items. The idea is to allow the user to slide though as many items (images) as there are in any one area. I also display the items in a HTML table but the carousel is just a visual extra attraction. And so far the users seem to like it. But not when there are tons of images.

    In addition, the user needs the ability to click on the image and be taken to page with the full news story. I do this with a form. It could done via a passed url but a form works best. It contains the image path, #ImageURL#".

    My worry is that you're going to give me  something I cannot understand, have no idea where to place it. This happens all the time and it's very time consumer to figure out what the Expert means. So this is why I've attempted to make t his a bit more clear. Hope I've not mucked it up in the process.

    In the snippet, ImagePath is a column in the table. It includes the path and the unique image filename. When the user moves over an image in the carousel the carousel stops and when an image is clicked, the FORM takes the user to a cfm page containing the story and a larger version of the image.

    Hope this helps. Again, I really need to be shown exactly where your suggestion goes in my code example above.
    <input type="image" src="/news/story/i/#ImagePath#">

    Open in new window


    Author Comment

    No response to my last set of replies so can anyone show me how to  impliment the suggestion of:

    document.images['imageName'].src = ''; \\image url

    into the code I'm using? You get the points if so.
    LVL 40

    Accepted Solution

    @Qsorb: My apologies for a late reply. I don't have good hands-on experience in Jquery/Coldfusion, so can't tell you the implementation level details.

    Following link might help you bit

    using the last link given above, you can fetch the number of links you want from the resultset variable and display it on the screen.

    Let me know if it helped a bit.


    Author Comment

    That wasn't any help but I did find that jCarousel has a function for dynamic loading of images and that works just fine. It's located here:

    Your links were no help but at least you tried so I'm going to give you points. Thanks.

    Author Closing Comment

    Best I can do for this one.

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now