Progressive loading image and text

[freddyx]

Is it possible to load images and some text progressive?

This is what I have so far:

< d i v c l a s s="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=1000 data-cycle-speed=750 data-cycle-starting-slide=0 data-cycle-random=false data-cycle-pause-on-hover=true data-cycle-sync=true data-cycle-slides="> div" data-cycle-pager="#cycle-pager" data-cycle-loader=true data-cycle-progressive="#images"

    < d i v ><i m g s r c="/wp-content/ uploads/ media/ slider_images/ slide7.jpg"><s p a n c l a s s="slide-desc">< c e n t e r >< b r /><e m><h 1>Some text</h 1></e m></c e n t e r></s p a n></d i v> 

    <script id="images" type="text/cycle">
                    [
                            "<div><img src='/wp-content/uploads/media/slider_images/slide2.jpg'><span class='slide-desc'><h1>Some text</h1><p>More text...</p></span></div>",
                            .
                            .
                            .
                            "<div><img src='/wp-content/uploads/media/slider_images/slide6.jpg'><span class='slide-desc'><h1>Some text</h1><p>More text...</p></span></div>"
                    ]
    </script> </d i v>

When I remove the SPAN, the images are loaded on the fly, but I have some text too.

You can take a look at: http://www.videograaf.eu This is without progressive loading.

I hope progressive loading with text can be done as it reduce load time and thats good.

Another thing is the pager; with progressive loading. Is it possible that this thing works as normal? Now, each dot appears when the image is loaded.

Hope some can help me. Thanks!

PS. What is the best way to insert HTML Code?

[malsup]

Yes, progressive loading works fine with mixed content. Here's an example with your slide markup:

http://jquery.malsup.com/cycle2/demo/progressive-mixed.php

Pager support with progressive loading is not currently functional.

[freddyx]

Thanks! It's working fine now.

The problem was some newlines in the 'More text...' formatting but i've removed them and now it is one line and it works.

[cj3wilso]

Does the pause button work for progressive loading? I've got everything working except the pause button for some reason! Prev and Next work just fine.

http://christinewilson.ca/portfolio/

[dotdreaming]

I would like to use the progessive loading with the Pager function. Would you be able to add this fuctionality please... pretty please?

[lorikay4]

dear Malsup:

I have a page that uses progressive loading and a mix of content types, and the animation just stops when it gets to the div w/ a paragraph in it (the last animation element, #56). The image animate, but not the last div containing a paragraph. ???

Please see: http://www.star.nesdis.noaa.gov/icvs-draft/DayViewerTest.php?fLP=contentIncludes/status/MetOPB&cFP=metrics/status/MetOPB/MHSX&fLF=status_MetOPB_MHS_201306.csv&sIL=MetOP-B%20MHS&cameFrom=status_MetOPB_MHS.php&humanDate=07-31-2013

I'm also wondering if the 'block' of content in each animation element needs to be rendered onto a single line, or can they wrap?

Thanks for any help.

[lorikay4]

Also, I'm trying to read the contents of a text file into a variable that will be part of an animation. Here is a sample of the type of file I need to be able to build into an animation:

http://www.star.nesdis.noaa.gov/icvs-draft/metrics/status/MetOPB/MHSX/daily/2013/07/20130726_m1_mhsx_status_Weekly.txt

Because this file is multiline, I suspected that it was breaking the progressive loading syntax. But when I swapped in a single line file, it didn't work either. ???

[malsup]

Could you temporarily use the non-minified Cycle2 on that page so I can look?

[lorikay4]

I have to to put that page back up, we are racing to get a site live. Will post an URL here in a bit.

[alexelash]

@malsup, does the progressive image loading from Cycle2 work with pagers now-a-days?