Link to home
Start Free TrialLog in
Avatar of Qsorb
QsorbFlag for United States of America

asked on

URGENT! Need way NOT to preload images

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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Carousel</title>
<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>");
	});
</script>
<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;
	color:#000;
	text-align: left;
	font: verdana, arial, sans-serif;
}
div.fun {
	margin: 2px;
}
</style>
<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,
	   pause:true,
        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) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            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

        if(o.btnPrev)
            $(o.btnPrev).click(function() {
                return go(curr-o.scroll);
            });

        if(o.btnNext)
            $(o.btnNext).click(function() {
                return go(curr+o.scroll);
            });

        if(o.btnGo)
            $.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);
            });

        if(o.auto)
            o.pause=setInterval(function() {
                go(curr+o.scroll);
            }, o.auto+o.speed);

		if(false!==o.pause){			
			this.onmouseover=function(){o.pause=clearTimeout(o.pause);};
			this.onmouseout=function(){
				o.pause=setInterval(function() {
                		go(curr+o.scroll);
            		}, o.auto+o.speed);
			};
		}
        function vis() {
            return li.slice(curr).slice(0,v);
        };

        function go(to) {
            if(!running) {

                if(o.beforeStart)
                    o.beforeStart.call(this, 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;

                ul.animate(
                    animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
                    function() {
                        if(o.afterEnd)
                            o.afterEnd.call(this, 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)
                        ||
                       []
                     ).addClass("disabled");
                }

            }
            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');
};

})(jQuery);
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
$(function() {
    $(".main .jCarouselLite").jCarouselLite({
        btnNext: ".main .next",
        btnPrev: ".main .prev",
        speed:1000, // main speed
        easing: "easeinout",
	   auto:true,
	   pause:true
    });       
});
//-->
</script>
</head>
<body>
<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>
        <ul>
<!--- 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
</cfquery>

<cfoutput query="GetStory">
    <form action="read.cfm" method="post" name="Select Category">
        <LI>
            <input id="TheImage" type="image" src="#ImagePath#">
        </LI>
    </form>
</cfoutput> 
        </ul>
        <a href="/" class="prev"><img src="right.png" style="z-index: 2;position:relative;left:547px;top:-77px" width="15" height="68" /></a> </div>
</div>
</body>
</html>

Open in new window

lib.min.js
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

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?
http://www.malsup.com/jquery/cycle/add.html

Avatar of Qsorb

ASKER

>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
'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
like

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

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



Avatar of Qsorb

ASKER

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.
Avatar of Qsorb

ASKER

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

Avatar of Qsorb

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Qsorb

ASKER

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:

http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html

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

ASKER

Best I can do for this one.