Simple self-made jQuery gallery flickers sometimes

EDIT:

I changed up the code a little bit. First I made a secondary MasterPage that holds the template for the view page. I then added a bit of ASP script to have the first image pr开发者_如何学Cesent:

 <img src="<%= string.Format("/Content/Images/Products/{0}1.jpg\"",
                    ViewData["CurrentPage"]) %>"  alt="" class="imgborder" />

I also added a 'preloading' script I found (not sure if it works, or if I am implementing it properly):

(function ($) {
    var cache = [];
    $.preLoadImages = function () {
        var args_len = arguments.length;
        for (var i = args_len; i--; ) {
            var cacheImage = document.createElement('img');
            cacheImage.src = arguments[i];
            cache.push(cacheImage);
        }
    }
})(jQuery)

And then at the footer:

$(document).ready(function () {
        var cPage = '<%= ViewData["CurrentPage"] %>';
        var temp = "";
        for (var i = 1; i <= 6; i++) {
            temp += "\"/Content/Images/Products/" + cPage + i + ".jpg\"";
            if (i < 6) temp += ", ";
        }
        jQuery.preLoadImages(temp);
});

Furthermore, I modified the swap script to modify an image tag rather than generate it with jQuery:

 function swapImage(val) {
    $("#CenterImage > img").fadeOut("fast", function () {
        var cPage = '<%= ViewData["CurrentPage"] %>';
        var temp = "/Content/Images/Products/" + cPage + val + ".jpg";
        $(this).attr("src", temp);
        $(this).load(function () {
            $(this).fadeIn("slow");
        });
    });
}

This seems to have resolved the issue 99% of the time. Every once in a while one maybe two of the images will take more time than the others to swap. Any further suggestions?

Thanks!

Hello SO:

I made a simple gallery for my ASP.NET MVC website with jQuery. I have a large center pic and 6 smaller thumbnails. Here is the code for setting the center div on load:

 $(document).ready(function () {
    var cPage = '<%= ViewData["CurrentPage"] %>';
    var temp = "<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />";
    $("#CenterImage > p").html(temp);
});

Very simply it gets the product from the ViewState and then uses that to determine the image set.

Here is the code for the swapping:

function swapImage(id) {
    $("#CenterImage > p").fadeOut("fast", function () {
        var cPage = '<%= ViewData["CurrentPage"] %>';
        var temp = "<img src=\"/Content/Images/Products/" + cPage + id + ".jpg\" alt=\"\" class=\"imgborder\" />";
        $("#CenterImage > p").html(temp);
        $("#CenterImage > p").fadeIn("slow");
    });
}

The weird part is sometimes it loads the images seamlessly and other times it fades out normally, 'freezes' up, then fades in super fast.

Any ideas/suggestions for tackling this issue?

The solution is to fade after the image loads like so:

$("#CenterImage > p").load(function() { $(this).fadeIn("slow"); });

You are inserting a new image into the DOM, which may or may not be cached. It's best to create the element before insertion, bind a load listener, and then append and show after you're sure the image has loaded.

var $temp = $("<img src=\"/Content/Images/Products/" + cPage + "1.jpg\" alt=\"\" class=\"imgborder\" />");

$temp.hide().bind('load', function () {
    $("#CenterImage > p").empty().append($temp);
    $temp.show();
}