[FIXED] How do I add loading indicator to an <img>?

Issue

I have the following HTML in my project.

<div class="container" id="crop">
    <img id="timage" src="http://example.com/color/style/etc/" alt="timages" />

I also have the following javascript:

$(window).load(function () {
$("#slider").change(function update() {
    sVal = $(this).val();
    if (sVal == 2) {
            $('#timage').prop('src',"http://example.com/" +
            tForm +
            "color.blahblah" + 
            itemCode + 
            "therest_ofthe_URL");}

    sVal = $(this).val();
    if (sVal == 3) {
            $('#timage').prop('src',"http://example.com/" +
            tForm +
            "color.blahblah" + 
            itemCode + 
            "therest_ofthe_URL");}
            );}

It works splendidly to replace the image with the string when the slider value reaches certain numbers. The problem is, the image is being created on the back end behind the scenes and takes quite some time before it is ready. In the meantime, you are just staring at the original image wondering if the slider did anything.

How do I add a loading indicator to let people know that the image is about to change?

Solution

First, place a loading indicator where you want it. You could replace #timage with a spinning gif, for example. Then use this code to start the new image loading:

var img = new Image();
img.onload = function () {
    $('#timage').prop('src', img.src);
}
img.src = '/image/to/load/here';

The function will be executed when your new image has been retrieved from the server and loaded. Since it's already cached on the client, it should load instantly once the src for #timage is set.

Answered By - amiller27

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More

[FIXED] How to load a library from composer?

Issue

I load a composer library suited for CodeIgniter called SteeveDroz\Asset, that I can access without problem with $asset = new SteeveDroz\Asset.

I would like to be able to load it with CodeIgniter $this->load->library('SteeveDroz\Asset'), but I get the error message

Unable to load requested class: SteeveDroz\Asset

Is it possible to achieve what I want? If yes, how?

Solution

As mentionned Alex in his comment, it is required to make an adapter library. I created an all purpose class for that:

application/libraries/ComposerAdapter.php

class ComposerAdapter
{
    private $object;

    public function __construct($object)
    {
        $this->object = $object;
    }

    public function __call($method, $args)
    {
        return call_user_func_array([$this->object, $method], $args);
    }
}

application/libraries/Asset.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

require('ComposerAdapter.php');

class Asset extends ComposerAdapter
{
    public function __construct()
    {
        parent::__construct(new SteeveDroz\Asset());
    }
}

application/config/autoload.php

// ...
$autoload['libraries'] = array('asset');
// ...

Answered By - SteeveDroz

Read More