Race condition in javascript

  • Resolved freerange

    (@freerange)


    12 years ago

    There is a race condition in your javascript:

    If an image has no size attributes and is not in cache your codes sees it as 0 x 0 and adds a pin button. However if the image is in cache and the browser knows it’s actual size you correctly detect it as too small and don’t add the button.

    The net result of this is you are adding pin buttons to other buttons if the user has a cold cache.

    The fix for this would be to add buttons in 2 stages: If you know the size go ahead but for any image that comes back 0 x 0 use onload() to trigger your code so that you only run when the browser actually knows how big the image is.

    John

    https://www.ads-software.com/extend/plugins/cb-pinterest-image-pinner/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter freerange

    (@freerange)

    Here is a fix that hides the button if the image size is 0 and check again on load to display the actual image. 

    CB_Pinterest_Pinner = function(selector, not_selector, min_width, min_height){
    function init(selector, not_selector, min_width, min_height) {
        jQuery(selector).not(not_selector).each(function(index) {
            var extra_css = new Array("margin", "margin-top", "margin-bottom", "margin-left", "margin-right", "padding", "padding-top", "padding-bottom", "padding-left", "padding-right");
            var already_selected = jQuery(this).attr("cb_pinned");
            if(already_selected != "true") {
                jQuery(this).attr("cb_pinned", "true");
                var height = jQuery(this).height();
                if( typeof height === "undefined") {
                    height = jQuery(this).attr("height");
                }
                var width = jQuery(this).width();
                if( typeof width === "undefined") {
                    width = jQuery(this).attr("width");
                }

                width = parseInt(width);
                height = parseInt(height);

                min_width = parseInt(min_width);
                min_height = parseInt(min_height);

                if((height == 0 || height > min_height) && (width == 0 || width > min_width)) {
                    var theID = 'pin_images_' + index;
                    jQuery(this).wrap('<div class="cb_pin_images" id="' + theID + '" />');
                    jQuery('#' + theID).append('<a class="cb_pin_link" href="#">&nbsp;</a>');
                    jQuery('#' + theID + " a").click(image_click);
                    if(height > 0) {
                        jQuery('#' + theID).height(height);
                    }
                    if(width > 0) {
                        jQuery('#' + theID).width(width);
                    }
                    var len = extra_css.length;
                    for(var i = 0; i < len; i++) {
                        var css_attr_name = extra_css[i];
                        var css_attr_value = jQuery(this).css(css_attr_name);
                        if(!( typeof css_attr_value === "undefined")) {
                            jQuery('#' + theID).css(css_attr_name,css_attr_value);
                        }
                    }
                    jQuery('#' + theID).addClass(jQuery(this).attr("class"));
                    if(height == 0 || width == 0) {
                        jQuery('#' + theID+' a.cb_pin_link').hide();        //If we don't know the image size hide the button for now
                        jQuery(this).load(function() {
                            //Image now loaded, see if it's big enough
                            if(jQuery(this).height() > min_height && jQuery(this).width() > min_width) {
                                jQuery(this).parent().find('.cb_pin_link').show();
                            }
                        })
                    }
                }
            }
        });
    }
    function image_click(event) {
        var url = document.URL;
       /* TODO add somehow to determine if this is a link to a post or not.
        * This works for the most part but not completely
        * $link_parents =jQuery(this).parent().parent("a");
        alert($link_parents.length);
        if($link_parents && $link_parents.length == 1 ){
            //alert(typeof $link_parents.get(0));
            url = $link_parents.attr("href");
        }*/
        if(url.charAt(url.length - 1) == "/") {
            url = url.substring(0, url.length - 1);
        }
        url = encodeURIComponent(url);
        var media = jQuery(this).prev("img").attr("src");
        media = encodeURIComponent(media);
        var description = jQuery(this).attr("title");
        if( typeof description === "undefined" || jQuery.trim(description) == "" ) {
            description = jQuery(this).prev("img").attr("alt");
            if( typeof description === "undefined" || jQuery.trim(description) == "" ){
                description = document.title;
            }
        }
        var href = 'https://pinterest.com/pin/create/button/?url=' + url + '&media=' + media + '&description=' + description;
        event.preventDefault();
        pin_this(href);
    }
    function pin_this(href) {
        window.open(href, "cb_pin_windows", "menubar=1,resizable=1,width=800,height=250");
    }
    init(selector, not_selector, min_width, min_height);
}
    Plugin Contributor chriswhittle

    (@chriswhittle)

    thanks will get it incorporated in my next build

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Race condition in javascript’ is closed to new replies.