locked
Images in Start Screen not always load after navigating away RRS feed

  • Question

  • Hi,

    I've created some "image buttons" in my LS HTML app, using Image screen properties and assigning them an img using this code:

    myapp.Inicio.MyDataTile_postRender = function (element, contentItem) {
        // Write code here.
        $('img', $(element)).prop("src", "Content/Images/MyData-tile_40px.png");
    };

    It was working fine til I upgraded to msls-2.5.1 and jquery-mobile-1.3.2. I don't know if that is actually the cause, but the tiles load fine when the app is launched, and sometimes after navigating away to other screens and returning, they don't show.

    Any suggestions? Is there a way I can load them on screen "created" instead in postRender?


    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Thursday, September 11, 2014 12:12 PM

Answers

All replies

  • We've recently taken a different approach in msls-2.5.0 which may be worth trying (though it's a little more code but has the bonus of working in the created).

    The approach uses the following helper promise operation function we've implemented: -

    function GetImageProperty (operation) {
        var image = new Image();
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        // XMLHttpRequest used to allow external cross-domain resources to be processed using the canvas.  
        // unlike crossOrigin = "Anonymous", XMLHttpRequest works in IE10 (important for LightSwitch) 
        // still requires the appropriate server-side ACAO header (see https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image)
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            var url = URL.createObjectURL(this.response);
            image.onload = function () {
                URL.revokeObjectURL(url);
                canvas.width = image.width;
                canvas.height = image.height;
                ctx.drawImage(image, 0, 0);
                var dataURL = canvas.toDataURL("image/png");
                operation.complete(dataURL.substring(dataURL.indexOf(",") + 1));
            };
            image.src = url;
        };
        xhr.open('GET', this.imageSource, true);
        xhr.responseType = 'blob';
        xhr.send();
    };

    This promise operation can be executed in the following way within the _postRender routine: -

    msls.promiseOperation
    (
        $.proxy(
            GetImageProperty,
            { imageSource: "content/Images/MyData-tile_40px.png" }
        )
    ).then(
        function (result) { 
            contentItem.screen.MyDataTile = result; 
        }
    );

    Alternatively, it can be called as follows in the screen's created function: -

    msls.promiseOperation
    (
        $.proxy(
            GetImageProperty,
            { imageSource: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/pie.png" }
        )
    ).then(
        function (result) { 
            screen.MyDataTile = result; 
        }
    );
    The above call also demonstrates that, in addition to displaying images local to the LightSwitch project, the imageSource can be set to an external url (provided the external site uses the appropriate server-side ACAO headers to allow cross-domain access).

    Hope this helps



    • Edited by ChrisCookDev Thursday, September 11, 2014 1:50 PM
    Thursday, September 11, 2014 1:49 PM
  • Thanks Chris for the reply. I just tried your helper and it works but it does not solve my issue. Sometimes, after browsing some screens around, and returning to the start screen, the images do not load. Only after reloading the whole app (F5 in my browser).

    If you don't mind me asking, you wrote all that code for a similar issue, or just because you needed to be able to load images from external sources?


    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Thursday, September 11, 2014 8:06 PM
  • Have a look at this thread as it contains a number of possible solutions that might help: html client icons disappear

    Regards, Xander. My Blog

    Thursday, September 11, 2014 9:27 PM
  • myapp.rootUri + "/HTMLClient/Content/Images/...png"

    did the trick. 

    Thank you!


    Nicolás Lope de Barrios
    If you found this post helpful, please "Vote as Helpful". If it actually answered your question, please remember to "Mark as Answer". This will help other people find answers to their problems more quickly.

    Friday, September 12, 2014 2:05 PM